CSS3：Flex布局_异度笔记

Flex是一种弹性布局，要分为两部分理解Flex：

作用于容器（flex-container）的属性
作用于容器里项目（flex-item）的属性

Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后，我们就可以确定了Flex分布的主轴（main axis）以及交叉轴（cross axis）。

主轴（main axis）： Flex方向设定为水平方向，主轴为水平方向，Flex设定为垂直分布，主轴为垂直方向。
交叉轴（cross axis）：与主轴垂直交叉的轴。
主尺寸（main size）：主轴方向的尺寸。
交叉尺寸（cross size）：交叉轴方向的尺寸。

Flex容器属性

display

应用Flex布局，首先需要确定容器，对容器设定display为flex。

.container {
  display: flex; /* 或者 inline-flex */
}

Flex布局方向：flex-direction

容器首先要设定容器内项目的分布方向。

flex-direction用来设定容器内项目的分布方向。

语法

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row：水平向右，默认值
row-reverse：水平向左
column：垂直向下
column-reverse：垂直向上

换行：flex-wrap

默认情况下，Flex布局的容器内项目都放置在一行（row/row-reverse表示横行，colum/column-reverse表示纵行）内。对于很多项目的情况，所有的项目放在一行内会显得很拥挤。属性flex-wrap可以让我们设定在一个方向上的项目是否允许换行。

语法

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap：不允许换行，默认值
wrap：允许换行，按顶部到底部的方向换行
wrap-reverse：允许换行，按底部到顶部的方向换行

主轴上对齐：justify-content

justify-content属性定义了项目在容器主轴上的对齐方式。它有六个值表示不同的对齐方式：

语法

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start：起始端对齐。不同的flex-direction，起始端不同。
flex-end：末端对齐。不同的flex-direction，末端不同。
center：居中对齐。
space-between：两端对齐。
space-around：项目的两端空白空间相等对齐，项目之间的空间为两个空白空间。
space-evenly：项目等间距对齐，包括主轴方向上的两端间距。

行内交叉轴对齐：align-items

align-items定义在一行内（row/row-reverse表示横行，colum/column-reverse表示纵行）项目的对齐方式，有点类似于文本的行内对齐。

语法：

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：行内交叉轴的起始端对齐
flex-end：行内交叉轴的末端对齐
center：行内居中对齐
baseline：基线对齐
stretch：行内两端延伸对齐

多行交叉轴对齐：align-content

align-content定义了多行整体在交叉轴的对齐方式，这是有区别align-items定义的行内对齐方式。

语法：

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：交叉轴方向上起始端对齐
flex-end：交叉轴方向上末端对齐
center：交叉轴方向上居中对齐
stretch：交叉轴方向上两端延伸对齐
space-between：交叉轴方向上两端对齐。
space-around：交叉轴方向上，项目两端空白空间相等，项目间空间为两个空白空间。

Flex项目属性

项目顺序：order

项目默认按代码的顺序排列。使用order属性则可以使用改变项目的排列顺序。

.item {
  order: <integer>; /* default is 0 */
}

默认值为0，order值大往后排列。

项目扩大空间占比：flex-grow

flex-grow定义了项目在容器剩余空间的扩大比例。

默认值为0，表示项目按指定的尺寸排列，不扩大。
都为1，表示所有项目均分剩余空间。
一个项目为2，其他项目为1，表示此项目占的空间是其他项目的两倍。

语法：

.item {
  flex-grow: <number>; /* default 0 */
}

项目收缩：flex-shrink

多个项目时，如果空间不够，那么项目需要收缩。flex-grow默认值为1。

项目的flex-shrink的值为0，其他项目值为1时，当容器的空间不足，那么其他项目按等比例收缩，flex-shrink为0的项目不收缩。

语法：

.item {
  flex-shrink: <number>; /* default 1 */
}

项目在分配剩余空间前的尺寸：flex-basis

flex-basic定义了项目在分配剩余空间前的尺寸。

语法：

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex-basis的值可以是百分比或空间尺寸。

flex-basis值为0，项目不参与额外空间的分配
flex-basis值为auto，项目根据flex-group的设置分配额外的空间

项目组合属性：flex

flex为flex-group，flex-shrink和flex-basis属性的组合。推荐使用此属性代替其他属性。

语法：

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

行内交叉轴对齐：align-self

align-items定义了行内所有的项目在交叉轴上的对齐方式，align-self则定义单个项目在交叉轴的对齐。

语法：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}