Flex(Flexible box)，意为弹性布局用来为盒装模型提供最大的灵活性。
我们可以从以下几个方面来简单的介绍flex布局的特点：
1，块级布局侧重垂直方向，行内布局侧重水平方向。但flex布局是与方向无关的。
2，使用flex布局可以实现空间的自动分配，自动对齐。
3，flex布局用于简单的线性布局，而更复杂的布局地交给grid布局。
任何一个容器都可以指定flex布局，例：
.box{
display:flex;
...
}
行内元素也可以使用flex布局。
.box{
display:inline-flex;
...
}
我们可以把使用flex布局的整体叫做Flex container，容器。他的子元素称Flex item，项目。
容器里有主轴（main axis）、交叉轴（cross axis），单个项目占据的主轴空间叫main size，单个项目占据的交叉轴空间叫cross size。
一，Flex container(容器)的6个属性
1，flex-direction 属性决定主轴的方向，即项目的排列方向。有4个值分别是：
- row 主轴为水平方向，起点从左端开始（默认值）；
- row-reverse 水平方向，方向反转；
- column 垂直方向，从上往下；
- column-reverse 垂直方向，方向反转。
2，flex-wrap 属性定义项目如何换行。有3个值。
- nowrap（默认值） 不换行；
- wrap 换行，第一行在上方；
- wrap-reverse 换行，第一行在下。
3，flex-flow 属性是以上两种属性的简写形式。如：
flex flow:<flex-direction> || <flex-wrap>
4，justify-content 属性定义了项目在主轴上的对齐方式。有5个值：
- flex-start 左对齐；
- flex-end 右对齐；
- center 居中
- space-between 两端对齐，项目之间间隔相等；
- space-around 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
5，align-items 属性定义项目在交叉轴上如何对齐，有5个值：
- flex-start 交叉轴的起点对齐；
- flex-end 交叉轴终点对齐；
- center 交叉轴中点对齐；
- stretch(默认值) 如果项目未设置高度或没auto，那么将占满整个容器的高度；
- baseline 项目的第一行文字的基线对齐。
6，align-content 属性定义多根轴线的对齐方式，有6个值：
- flex-start 与交叉轴的起点对齐；
- flex-end 与交叉轴的终点对齐；
- center 与交叉轴中点对齐；
- space-between 与交叉轴两端对齐，轴线之间间隔平均分布；
- space-around 每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框的间隔大一倍；
- stretch(默认值) 轴线占满交叉轴。
二，Flex item(项目)的6个属性
- order属性定义了项目的排列顺序，数值越小排列越前面，默认值为0；
- flex-grow属性定义了项目的增长比例，默认为0，即如果存在剩余空间也不给放大；如果一个项目的flex-grow属性值为2，其他两个项目都为1，那么前者占据的剩余空间将比其他两个多一倍。
- flex-shrink 属性定义了项目的收缩比例。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
网友评论