Flex布局

BenCHou 发布于2019-08-02 10:12 / 1195人阅读

摘要：这相当于设置属性为定义子项多带带在侧轴纵轴方向上的对齐方式属性可重写灵活容器的属性语法格式红色蓝色带有更多内容的绿色参考

Flex布局 1.什么是Flex布局

Flex是Flexible Box的缩写,意为弹性布局,任何容器都可以设为弹性布局.

.box{
    display:flex;
    display:inline-flex;   //行内元素
    display:-webkit-flex;  //Webkit内核的浏览器
}

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效.

2.容器属性 flex-direction

指定了内部元素是如何在flex容器中布局的,定义了主轴的方向(正方向或反方向).
语法格式:flex-direction:row | row-reverse | column | column-reverse




    
    Title
    


This is a Column-Reverse

    A
    B
    C

This is a Row-Reverse

    A
    B
    C

flex-wrap

指定flex元素单行还是多行显示.如果允许换行,该属性允许你控制行的堆叠方向.
语法格式:flex-wrap: nowrap | wrap | wrap-reverse




    
    Title
    


This is an example for flex-wrap:nowrap 

    1
    2
    3

This is an example for flex-wrap:wrap 

    1
    2
    3

This is an example for flex-wrap:wrap-reverse 

    1
    2
    3

flex-flow

是flex-direction和flex-wrap的简写.
语法格式: flex-flow: || ,例如:flex-flow: column-reverse wrap;

justify-content

定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间.
语法格式:justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start 从行首开始排列.每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐.
flex-end 从行尾开始排列.每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐.
center 伸缩元素向每行中点排列.每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同.
space-between 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素与行首对齐,每行最后一个元素与行尾对齐.
space-around 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半.




    
    Title
    


This is an example for justify-content:space-between

    1
    2
    3

This is an example for justify-content:flex-start 

    1
    2
    3

This is an example for justify-content:space-around 

    1
    2
    3

align-items

以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐.
语法格式：align-items:flex-start | flex-end | center | baseline | stretch
flex-start 元素向侧轴起点对齐.
flex-end 元素向侧轴终点对齐.
center 侧轴中点对其.
baseline 项目的第一行文字的基线对齐.
stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度.

align-content




    
    Title

align-items与items-content的区别

`align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式.让每一个单行的容器居中而不是让整个容器居中.
align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐.`
对于Flex容器里面单行的情况,align-content是不起作用的.

对于多行的,也就是多个cross axis的情况.

3.项目属性 order

元素按照order属性的值的增序进行布局.拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局.

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大.




    
    Title
    


This is a Flex-Grow
A,C are flex-grow:1 . B is flex-grow:2 .

    A
    B
    C

flex-shrink

指定了 flex 元素的收缩规则.flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值.
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.

Title

the width of content is 500px, flex item is 500px.

A, C are flex-shrink:1. B is flex-shrink:2

flex-basis

指定了 flex 元素在主轴方向上的初始大小.如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小.




    
    Title

flex

规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间,flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选.
语法格式: flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
其中auto (1 1 auto) 和 none (0 0 auto).




    
    Title
    



    auto
    auto
    auto


    auto
    initial
    initial


    auto
    auto
    none



    initial
    none
    none


    4
    2
    1


    Flex box (click to toggle raw box)
    Raw box

auto 元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器.这相当于将属性设置为 "flex: 1 1 auto".
initial 属性默认值,元素会根据自身宽高设置尺寸.它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器.相当于将属性设置为"flex: 0 1 auto".
none 元素会根据自身宽高来设置尺寸.它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器,相当于将属性设置为"flex: 0 0 auto".
元素会被赋予一个容器中自由空间的指定占比。这相当于设置属性为"flex: 1 0".

align-self





align-self




  红色
  蓝色  
  带有更多内容的绿色 div

参考:
https://css-tricks.com/snippe...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52192.html

CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
几种常见布局的flex写法

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式公式1：子元素空间 < 父容器父...

fish 2019-08-01 17:08 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0