Flex简介：
当元素的display属性设置为flex的时候，该元素则是Flex容器，它的所有子元素自动成为容器的成员，则称为Flex项目（flex item），且Flex项目会脱离一般文档流变成Flex文档流。
容器的属性：
1、flex-direction：决定容器成员的排列方向（在flex容器中的子元素，脱离普通文档流，成为flex文档流）
① row（默认）：水平方向，从左到右，起点在左
② row-reverse ：水平方向，从右到左，起点在右
③ column：垂直方向，从上到下，起点在上
④ column-reverse：垂直方向，从下到上，起点在下
2、flex-wrap：决定容器内成员排列时，是否换行（换行只会在容器宽度装不下成员的情况，才会发生）
① nowrap（默认）：容器成员都只排在一条轴线上，即 容器成员宽度总和 大于 容器宽度，都不换行，而是自动平均压缩成员宽度，使所有成员排序在该轴线上。
② wrap：换行，第一行在容器上方
③ wrap-reverse：换行，第一行在容器下方
3、flex-flow：该属性是flex-direction和flex-wrap的简写形式
① row nowrap（默认值）
② 参考上面取值，第一个值是flex-direction，第二个值是flex-wrap
4、justify-content：决定容器成员在主轴上的水平对其方式
① flex-start（默认值）：左对齐
② flex-end：右对齐
③ center：居中
④ space-between：两端对其，同一条主轴上的成员之间间隔相等
⑤ space-around：每个成员两侧的间隔相等，且最左边或者最右边的成员与容器边框的距离比成员间距离小一倍
5、align-items：决定容器成员在交叉轴上的垂直对其方式（注意：该属性无法设置wrap换行的容器成员）
① stretch（默认值）：如果成员未设置高度或者设为auto，将占满整个容器的高度
② flex-start：垂直方向，最上方对其（如果成员没有设置高度，则靠成员的内容撑起高度）
③ flex-end：垂直方向，最下方对其（如果成员没有设置高度，则靠成员的内容撑起高度）
④ center：垂直方向，居中对其（如果成员没有设置高度，则靠成员的内容撑起高度）
⑤ baseline：项目的第一行文字的基线对其，简单说就是：找到成员里第一行文字在最下面，其他成员的第一行文字进行对其（如果成员没有设置高度，则靠成员的内容撑起高度）
6、align-content：多根轴线（已设置wrap并换行的容器才有效）在交叉轴上的垂直对其方式
① stretch（默认值）：如果成员未设置高度或者设为auto，多行成员平均分配占满整个容器的高度
② flex-start：垂直方向，最上方对其（如果成员没有设置高度，则靠成员的内容撑起高度）
③ flex-end：垂直方向，最下方对其（如果成员没有设置高度，则靠成员的内容撑起高度）
④ center：垂直方向，居中对其（如果成员没有设置高度，则靠成员的内容撑起高度）
⑤space-between：与交叉轴两端对齐，轴线之间的间隔平均分布行文字进行对其
⑥space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
容器成员（Flex项目）的属性：
order：属性定义项目的排列顺序。数值越小，排列轴线方向的越靠前，默认为0。
flex-grow：成员的放大比例，默认为0，即如果存在剩余空间，也不放大。
① 如果设置为1，则告诉该成员需要放大容器剩余宽度（成员之间间隙就会不见）
② 如果是设置2或者2以上，且同轴的其他成员也有设置该属性，则按照互相之间的比例进行分配剩余空间
flex-shrink：该属性定义了项目的缩小比例，默认为1，即如果容器的空间不足，该元素将缩小。(当容器为nowrap不换行时才会有效)
①如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
② 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis：该属性定义了在分配多余空间之前，成员占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
①它可以设为跟width或height属性一样的值（比如350px），则成员将占据固定空间，不受flex-grow和flex-shrink改变成员大小。
flex：该属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选，写或不写都能配置。
align-self：允许单个成员有与其他成员有不一样的对齐方式，可覆盖该成员身上的align-items属性。
① 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
② 取值参考align-items的所有取值。
网友评论