CSS display：flex弹性布局学习笔记

介绍

Flex是Flexible Box的缩写，意思是弹性布局，通常被称为flexbox。它给flexbox的子元素提供了强大的空间分布和对齐能力。

采用flex布局的元素称为flex容器，简称容器。此元素下的所有子元素自动成为容器成员，称为flex项目，简称项目。

容器默认存在两个轴：水平的主轴和垂直的交叉轴。项目默认沿着主轴排列。

容器的属性

flex-direction

flex-direction属性决定主轴的方向，即项目的排列方向

flex-direction：row | row-reverse | column | column-reverse
row：（默认值）主轴为水平方向，起点在左侧
row-reverse：主轴为水平方向，起点在右侧
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方

flex-wrap

默认情况下，项目都在一条轴线上。flex-wrap属性定义了如果一条轴线上放不下如何换行

flex-wrap：nowrap | wrap | wrap-reverse
nowrap：（默认值）不换行
wrap：换行
wrap-reverse：换行，第一行在下方

flex-flow

flex-flow属性是flex-direction和flex-wrap的简写形式，默认值是 row nowrap。

flex-flow：flex-direction || flex-wrap

justify-content

justify-content属性定义了项目在主轴上的排列方式

justify-content：flex-start | flex-end | center | space-between | space-around
flex-start：（默认值）主轴的起点位置
flex-end：主轴的终点位置
center：居中
space-between：两端对齐，项目的间隔都相同
space-around：项目之间的间隔都相同，但是两端的项目与容器边缘的距离会比项目之间的间隔小一倍

align-items

align-items属性定义了项目在交叉轴上的排列方式

align-items：flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的起点位置
flex-end：交叉轴的终点位置
center：居中
baseline：项目的第一行文字的基线对齐
stretch：（默认值）如果项目未设置高度或设置为auto，则项目充满整个容器的高度

align-content

align-content属性定义了多根轴线时的排列方式，如果项目只有一根轴线，该属性不起作用

align-content：flex-start | flex-end | center | stretch | space-between | space-around
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：居中对齐
stretch：（默认值）轴线占满整个交叉轴
space-between：与交叉轴两端对齐，轴线之间的间隔相同
space-around：轴线之间的间隔都相同，但是两端的轴线与容器边缘的距离会比轴线之间的间隔小一倍

项目的属性

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

order：<number>

flex-grow

flex-grow属性定义项目的放大比例，默认为0。即如果存在剩余空间也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有剩余空间的话）
如果某个项目的flex-grow属性为2，其余的项目flex-grow属性为1，则前者占据的空间将比后者占据的空间多一倍

flex-grow：<number>

flex-shrink

flex-shrink属性定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小
如果所有的项目flex-shirnk属性都为1，则空间不足时都不缩小。
如果某一个项目flex-shrink属性为0，其他项目为1，则空间不足时前者不缩小。

flex-shrink：<number>

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小。

flex-basis：<length> | auto

它可以设为跟width或height一样的值，则项目将占据固定的空间。

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）
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self

align-self属性允许单个项目可以和其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items。

align-self：auto | flex-start | flex-end | center | baseline | stretch