【CSS】flex布局详解

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"伸缩盒模型"或者"弹性盒模型"，用来为盒状模型提供最大的灵活性。

1. 伸缩容器和伸缩项目

1.1 概念定义

伸缩容器： 给元素设设置 display: flex 或者 display:inline-flex，该元素就变为伸缩容器。

伸缩项目： 伸缩容器的子元素就是伸缩项目。

1.2 伸缩项目的特点

• 一个元素既可以是容器也可以是项目

• 没有脱离文档流，可以水平排列(沿着主轴方向，主轴方向默认水平)，也没有空白

• 不管原来显示模式是什么，变成伸缩项目就具备伸缩项目的特点

• 伸缩项目权重等级比浮动高，小于定位。也就是同时设置伸缩和浮动，显示伸缩，同时设置伸缩和定位，显示定位

• 伸缩项目具有独立的显示模式

  • 默认宽高被内容撑开，不存在外边距的塌陷合并(区别块元素)
  • 可以完美设置宽高、内外边距(区别于行内元素)
  • 不会被父元素作为文本(区别于行内块元素)

• 伸缩项目具有伸缩性

容器没有特点，重点是项目

2. 设置主轴方向和换行方式

主轴main axis： 伸缩项目会沿着主轴进行排列，第一个伸缩项目在主轴起点处，然后依次排列

侧轴cross axis： 侧轴永远与主轴保持垂直，修改主轴方向，侧轴也随之改变

2.1 设置主轴方向flex-direction

给伸缩容器设置属性flex-direction，可以改变主轴方向

值	语义
row	默认水平从左到右
row-reverse	水平从右到左
column	竖直从上到下
column-reverse	竖直从下到上

2.2 设置换行方式flex-wrap

给伸缩容器设置属性flex-wrap，可以改变伸缩项目在主轴上的换行方式

值	语义
nowrap	不换行默认
wrap	自动换行
wrap-reverse	自动换行且翻转

2.3 同时设置主轴方向和换行方式flex-flow

给伸缩容器设置属性flex-flow可以同时设置主轴方向和换行方式，相当于复合属性，也可以写一个值

3. 在主轴上的对齐方式 justify-content

给伸缩容器设置 justify-content , 该属性的值如下：

值	语义
flex-start	主轴起点对齐
flex-end	主轴终点对齐
center	居中对齐
space-between	两端对齐
space-around	两端的间距是中间间距的一半
space-evenly	两端的间距与中间间距相同

4. 在侧轴上的对齐方式

4.1 一条主轴线（伸缩项目在主轴上不换行） align-items

给伸缩容器设置 align-items，属性值如下：

值	语义
stretch	拉伸，默认值。 如果伸缩项目不设置侧轴上的长度，会拉伸至于伸缩容器侧轴长度一致。
flex-start	侧轴起点对齐
flex-end	侧轴终点对齐
center	居中对齐
baseline	基线对齐

4.2 多条主轴线 （伸缩项目在主轴上发生换行） align-content

给伸缩容器设置 align-content，属性值如下：

值	语义
stretch	拉伸，默认值。 如果伸缩项目不设置侧轴上的长度，会拉伸至于伸缩容器侧轴长度一致。
flex-start	侧轴起点对齐
flex-end	侧轴终点对齐
center	居中对齐
space-between	两端对齐
space-around	两端的间距是中间间距的一半
space-evenly	两端的间距与中间间距相同

5. 伸缩项目的伸缩性

5.1 伸缩项目在主轴上的长度 flex-basis

1. 该属性设置的是伸缩项目在主轴上的长度，优先级高于 width 或者 height。
2. 该属性默认值 auto，默认，伸缩项目在主轴上的长度按照 width 或者 height 的设置。

5.2 扩展比率 flex-grow

伸缩项目扩展的前提：

1. 伸缩容器在主轴方向上有富余空间
2. 伸缩项目的扩展比率不能是 0

伸缩项目扩展的规则：

各伸缩项目按照各自的扩展比率，瓜分伸缩容器的富余空间

5.3 收缩比率flex-shrink

伸缩项目收缩的前提：

1. 伸缩容器在主轴上的长度不够（小于伸缩项目在主轴上的长度和）
2. 收缩比率不能是 0
3. 伸缩项目在主轴上不能自动换行

伸缩项目收缩的规则：

既要考虑收缩比率，也要考虑伸缩项目原本在主轴上的长度

5.4 flex 复合属性

flex: 扩展比率 收缩比率 basis;

/* 简写 */
flex: 1;  /* flex:1 1 0 */
flex: auto; /* flex: 1 1 auto*/
flex: none;  /* flex:0 0 auto */
flex: 0 auto;  /*flex:0 1 auto*/

6. 伸缩项目排序

给伸缩项目设置属性 order
属性的值是纯数字，可以是负值，值越大，排序越靠后

7. 单独设置伸缩项目在侧轴上的对齐方式 align-self

给伸缩项目设置 align-self，属性值：

值	语义
auto	默认值，按照伸缩容器中 align-items 的设置
stretch	拉伸
flex-start	侧轴起点对齐
flex-end	侧轴终点对齐
center	居中对齐
baseline	基线对齐

8. 总结

8.1 容器属性

属性	属性值	说明
flex-direction（主轴排列方向）	row	默认值，主轴为水平，起点在左端，从左往右排列
	row-reverse	主轴为水平，起点在右端，从右往左排列
	column	主轴为垂直方向，起点在上边，从上往下排列
	colum-reverse	主轴为垂直方向，起点在下边，从下往上排列
flex-wrap（项目在容器中一行无法显示的时候如何换行）	nowrap	默认值，不换行/列
	wrap	主轴是水平时，从上到下换行；主轴为垂直时。从左到右换行
	wrap-reverse	主轴是水平时，从下到上换行；主轴为垂直时。从右往左换行
justify-content（项目在容器中主轴上对齐方式）	flex-start	默认值，左对齐
	flex-end	右对齐
	center	居中对齐
	space-between	两端对齐
	space-around	每个项目两侧的间距相等
align-items（项目在侧轴上对齐方式）	flex-start	侧轴起点对齐
	flex-end	侧轴终点对齐
	center	侧轴中点对齐
	baseline	伸缩项目的第一行文字的基线对齐
	stretch	默认值，如果伸缩项目未设置高度或设为auto，将占满整个容器的高度
align-content（侧轴方向上有多根轴线的对齐方式，如果只有一根不起作用）	flex-start	与侧轴的起点对齐
	flex-end	与侧轴的终点对齐
	center	与侧轴的中点对齐
	space-between	与侧轴两端对齐，轴线之间的间隔平均分布
	space-around	每根轴线两侧的间隔都相等
	stretch	默认值，轴线占满整个侧轴

8.2 项目属性

属性	值	说明
order（定义项目的排列顺序）	数字	数值越小，排列越靠前，默认为0
flex-grow（项目放大比例）	数字	默认为0，即如果存在剩余空间，也不放大。
flex-shrink（项目的缩小比例）	数字	默认为1，即如果空间不足，该项目将缩小。
flex-basis（在分配多余空间之前，伸缩项目占据的主轴空间）	长度/auto	默认值为auto，即项目的本来大小。
align-self（当前项目可以和其他项目拥有不一样的对齐方式，覆盖align-items属性）	flex-start	侧轴起点对齐
	flex-end	侧轴终点对齐
	center	侧轴中点对齐
	baseline	伸缩项目的第一行文字的基线对齐
	stretch	默认值，如果伸缩项目未设置高度或设为auto，将占满整个容器的高度