一、简介
Flex布局为CSS3提供的一种新式页面布局方法，通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。
二，特点
- 相比于CSS中块级布局更侧重于垂直方向、行内布局更侧重于水平方向，flex布局是方向无关的；
- Flex布局可以实现元素空间自动分配，自动对齐；
- 适用于简单的线性布局
三、Flex布局模型
Flex布局模型
Flex布局中容器称为flex-container，即为display:flex;的元素，其内部元素称为Flex-item，其内又分为main axis与cross axis，各有起点、终点，长度分别为main size与cross size。
四、flex container属性介绍
应用于弹性容器（flex-container）中的属性有以下几个：
- flex-direction,此属性指定了内部元素是如何在 flex 容器中布局的，并定义了主轴的方向(正方向或反方向)。其取值主要有row（默认），row reverse,column,col umn-reverse,分别指定fle-item水平，水平反向，竖直，竖直反向排列。
flex-direction:row
flex-direction:row-reverse
- flex-wrap,指定是否换行，常用值为wrap,nowrap（默认），即item默认不换行。
flex-wrap:wrap
flex-wrap:nowrap
-
flex-flow,此属性为flex-direction与flex-wrap的缩写形式，如：flex-flow:row wrap表示竖向排列，换行。
flex-flow:column wrap
- justify-content,定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间,取值主要有flex-start（默认，从行首开始排列）,flex-end（从行尾位置开始排列）,center（元素居中）,space-between（均匀排列，首元素位于起点，尾元素位于终点）,space-around（均匀排列，每个元素周围分配相同空间）,
justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
- align-items,以与justify-content相同的方式在侧轴方向上将当前行上的flex元素对齐，其取值主要有stretch（默认值，弹性元素在侧轴上拉伸为与container同等高度或宽度），flex-start（元素向侧轴起点对齐），flex-end（元素向侧轴终点对齐），center（元素在侧轴居中），baseline（所有元素向基线对齐）。
align-items:stretch
align-items:flex-start
align-items:flex-end
align-items:center
align-items:baseline
五 flex item属性介绍
应用于弹性项目（flex-item）中的属性有以下几个：
- flex-grow,定义flex item的拉伸因子，值为数字正值。
flex-grow:1
- flex-shrink,定义收缩因子，值为数字正值
- flex-basis,指定原始空间。
flex-basis:300px
- flex,以上三个属性的缩写。
- order，改变展示顺序
order
- align-self, 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items的值（ 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self），取值有auto（设置为父元素的align-items的值，如果该元素没有父元素的话，就设置为 stretch）,stretch（flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸）,flex-start（flex 元素会对齐到 cross-axis 的首端）,flex-end（flex 元素会对齐到 cross-axis 的尾端）,center（flex 元素会对齐到 cross-axis 的中间）,baseline（所有的 flex 元素会沿着基线对齐）;
六、使用注意
由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：
- 多栏布局模块的 column-*属性对弹性项目无效。
- float对弹性项目无效。使用 float将使元素的 display属性计为block。
- vertical-align对弹性项目的对齐无效。
七、资料来源
CSS弹性盒子https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
网友评论