Flex布局

1. 前言

(1) Flex的兼容性

作为一个经历过需要兼容IE6时代的前端，不需要用float后，使用position(absolute)和display(inline-block)已经很爽了。Flex其实已经出现很久了，但是原来因为浏览器的兼容问题，很多实际项目并不能使用。

现在它兼容性已经能在项目中被接受了，如下：

(2) 为什么要使用Flex?

对于我真正希望把Flex的用法整理起来，是因为如下两个场景：

1. list 如果只有1个item，显示100%；2个item，显示50%；3个item，显示33.3333%；4个item，显示25%，以此类推。

2. 两个并列的容器，不管其内容的高度是多少，始终等高。

传统的方式很难仅仅依靠CSS解决，纯样式的问题交给js也不合理。

使用Flex的解决方案：仅仅需要设置父元素 display: flex，子元素 flex: 1。

2. 什么是Flex？

Flex是Flexible Box的缩写，意为“弹性布局”。当设置flex布局后，子元素的float、clear以及vertical-align会失效。

(1) Flex容器和项目

使用Flex布局的元素称为Flex容器（flex container），简称**“容器”。其所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”**。

.container{
	display: flex | inline-flex; /* 容器可有两种取值，分别生成一个块状或行内的flex容器盒子 */
}

需要增加浏览器前缀。如下：

.container{
	display: -webkit-flex; /* Safari、Chrome */
	display: -ms-flex;     /* IE */
	display: -moz-flex;    /* Firefox */
	display: flex;         
}

(2) 基本概念

flex容器中存在两根轴，分别是：水平主轴（main axis）和垂直的交叉轴（cross axis），这是默认设置（可以变换）。项目默认沿主轴排列。

• main start: 主轴开始位置（与边框交叉点）
• main end: 主轴结束位置
• cross start: 交叉轴开始位置
• cross end: 交叉轴结束位置
• main size: 单个项目占据的主轴空间
• cross size: 单个项目占据的交叉轴空间

3. Flex的属性

(1) 容器的属性

• flex-direction：主轴的方向
• flex-wrap：容器内项目是否可换行
• flex-flow：flex-direction和flex-flow的简写
• justify-content：项目在主轴的对齐方式
• align-items：项目在交叉轴上的对齐方式
• align-content：多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）

[1] flex-direction

设置主轴的方向。

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

属性值	含义	效果
row(默认)	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

示例：https://jsfiddle.net/vu86L4tw/12/

[2] flex-wrap

设置容器内项目是否可换行。默认情况，项目都排在主轴线上。

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

属性值	含义	效果
nowrap(默认)	不换行，空间不足时，项目尺寸会随之调整，保证在一行显示
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

https://jsfiddle.net/tram5f6h/

[3] flex-flow

flex-direction和flex-flow的简写，尽量分开写。默认值为：row nowrap。

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

[4] justify-content

定义项目在主轴上的对齐方式。

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

属性值	含义	效果
flex-start(默认)	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目间的间隔相等
space-around	每个项目两侧间隔相等（项目之间比收尾边缘间隔大）

[5] align-items

定义项目在交叉轴上的对齐方式。

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

属性值	含义	效果
flex-start	交叉轴起点对齐
flex-end	交叉轴终点对齐
center	交叉轴中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。	（这里有高度是由于设置了line-height: 50px, 如果容器设置了高度，就等于容器高度，查看https://jsfiddle.net/gnu0js46/6/）

示例：https://jsfiddle.net/gnu0js46/8/

[6] align-content

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

什么情况是一条轴线，什么时候是多条轴线？项目不换行时（即flex-wrap设置为nowrap），只有一条轴线；否则，多条。

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

属性值	含义	效果
flex-start	与交叉轴起点对齐
flex-end	与交叉轴终点对齐
center	与交叉轴中点对齐
space-between	与交叉轴两端对齐，轴线间的间隔相等
space-around	每根轴线两侧间隔相等
stretch（默认值）	轴线占满整个交叉轴。设置容器高度，不设置项目高度(图1)https://jsfiddle.net/Ldu03cte/1/；设置项目高度(图2)https://jsfiddle.net/Ldu03cte/2/

示例：https://jsfiddle.net/Ldu03cte/3/

(2) 项目的属性

• order：项目的排列顺序
• align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
• flex-basis：在分配多余空间之前，项目占据的主轴空间，默认为auto
• flex-grow：定义项目的放大比例，默认为0
• flex-shrink：定义项目的缩小比例，默认为1
• flex：是flex-basis, flex-grow和flex-shrink的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

[1] order

定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

.item{
	order: <integer>;
}

在html结构中靠后的项目，若order数值小，也可以排在前面，若没有设置order，默认其值为0，如下图：

示例：https://jsfiddle.net/tmf0eLx6/

[2] align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

示例: https://jsfiddle.net/h8yg3dk9/1/

[3] flex-basis、flex-grow、flex-shrink

参见：https://blog.youkuaiyun.com/joyce_lcy/article/details/87811984

---

参考文章：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://zhuanlan.zhihu.com/p/25303493