介绍flex布局模型，归纳flex容器属性、项目属性

flex布局

flex布局模型图解

任何一个容器都可以指定为 flex布局

.box{
    display: flex;	/* 块级元素指定为flex布局 */
}

.box{
    display: inline-flex;	/* 行内元素指定为flex布局 */
}

采用flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为「flex项目」（flex item）

flex容器有两根轴：「主轴」和「交叉轴」。默认情况下：主轴为水平方向，交叉轴为垂直方向。但是也通过flex-direction属性改变

一、flex容器属性

属性一览：

容器属性	说明
flex-direction	排列方向
flex-wrap	换行方式
flex-flow	flex-direction和flex-wrap的全写属性
justify-content	主轴对齐方式
align-items	交叉轴对齐方式
align-content	多根主轴的对齐方式

1.1、flex-direction

作用：决定主轴的方向（水平or垂直）

可选值	row	row-reverse	column	column-reverse
描述	水平向右	水平向左	垂直向下	垂直向上

1.2、flex-wrap

作用：决定主轴换行的方式（当项目一行放不下的时候）

可选值	nowrap	wrap	wrap-reverse
描述	（默认值）不换行	换行，第一行排在前面	换行，第一行排在后面

1.3、justify-content

作用：容器中的所有项目在主轴上的对齐方式。

可选值如下：

flex-start	flex-end	center
（默认）左对齐	右对齐	居中对齐
space-between	space-around	space-evenly
两端对齐	分散对齐（项目之间的间隔 = 项目与边框间隔 * 2）	分散对齐（所有间隔平均分）

效果示意图：

（图中少展示一个space-evenly）

1.4、align-items

作用：容器中所有项目在交叉轴上的对齐方式。（与之相联系的是项目属性align-self，它规定单个项目在交叉轴的对齐方式）

可选值如下：

flex-start	flex-end	center	baseline	stretch
对齐交叉轴起点	对齐交叉轴终点	交叉轴居中	所有项目的第一行文字的基线对齐	（默认值）如果项目未设置hegiht或者为auto，占满整个交叉轴高度

效果示意图：

1.5、flex-flow

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

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

1.6、align-content

作用：定义多根轴线的对齐方式**，（如果项目只有一根轴线，该属性不起作用！）

可选值：

flex-start	flex-end	center	space-between	space-around	stretch
交叉轴起点对齐	交叉轴终点对齐	交叉轴居中对齐	交叉轴两端对齐	轴线之间的间隔 = 轴线与边框间隔 * 2	轴线占满整个交叉轴

示意图：

二、flex项目属性

属性一览：

项目属性	说明
order	项目的排列顺序
align-self	单个项目在交叉轴上的对齐方式，取值和align-items一致
flex	flex-grow flex-shrink flex-basis 的全写
flex-grow	项目的放大比例
flex-shrink	项目的缩小比例
flex-basis	在分配多余空间之前，项目占据的主轴空间

2.1、order

作用：定义项目的排列顺序。数值越小，排列越靠前，默认为0。（接受负数）

.item{
    order: <number>;
}

示意图：

2.2、align-self

作用：允许单个项目与其它项目（在交叉轴上）有不一样的对齐方式

取值：

auto	flex-start	flex-end	center	baseline	strecth
表示继承容器的align-items	交叉轴起点对齐	交叉轴终点对齐	交叉轴居中对齐	不详	拉伸占满交叉轴

示意图：

2.3、flex

作用：flew-grow、flex-shrink、flex-basis三者（按先后顺序）的简写。建议优先使用 flex属性，而不是分开写三个属性

取值：

• （默认值）：0 1 auto，即：空间变化时，不放大、但会缩小、项目占据主轴宽度为其原本大小
• auto：1 1 auto，即：空间变化时，会放大、会缩小，项目占据宽度为原本大小
• none：0 0 auto，即：空间变化时，不放大、不缩小，项目占据宽度为原本大小

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

2.4、flex-grow

作用：定义项目的放大比例，默认为0，即：尽管如果存在剩余空间也不放大

取值：数字。如果一行中所有项目的flex-grow属性相同，那么它们将平分剩余空间

示意图：

2.5、flex-shrink

作用：定义项目的缩小比例，默认为1，即：如果剩余空间不足，该项目将缩小。

取值：数字。如果所有项目的flex-shrink相同，当空间不足时，所有项目等比例缩小。如果一个项目的flex-shrink=0，则当空间不足时，该项目不缩小。（负数无效）

.item{
    flex-shrink: <number>;
}

示意图：

2.6、flex-basis

作用：定义了在分配多余空间之前，项目占据的主轴宽度。浏览器会根据这个属性计算主轴是否有多余空间

取值：宽度，默认为auto（即项目原本的大小）

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

参考文章

Flex 布局语法教程 | 菜鸟教程 (runoob.com)