Flex布局初见

作者: pz明 | 来源:发表于2017-05-07 00:13 被阅读29次

Flex布局为CSS3提供的一种新式页面布局方法，通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。

Flex布局模型

Flex布局中容器称为flex-container，即为display:flex;的元素，其内部元素称为Flex-item，其内又分为main axis与cross axis，各有起点、终点，长度分别为main size与cross size。

应用于弹性容器（flex-container）中的属性有以下几个：

flex-direction,此属性指定了内部元素是如何在 flex 容器中布局的，并定义了主轴的方向(正方向或反方向)。其取值主要有row（默认），row reverse,column,col umn-reverse,分别指定fle-item水平，水平反向，竖直，竖直反向排列。

flex-direction:row

flex-direction:row-reverse

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-grow:1

flex-basis:300px

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 元素会沿着基线对齐）;