flex布局

1 What

Flex is Flexible Box缩写,弹性布局
任何元素都可以成为Flex布局：

// 块级元素
.box{
  display: flex;
}
// 行内元素
.box{
  display: inline-flex;
}

成为Flex布局，float,clear,vertical-align失效

2 基本概念

flex布局，有两条轴，横的叫主轴（main axis）与边框焦点为main start和main end，竖的叫交叉轴（cross axis），与边框焦点称之为cross start和cross end。单个项目占据的主轴空间叫main size，占据的交叉轴空间cross size.

3 容器属性

以下六个属性为容器的属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 flex-direction

决定主轴的方向，项目的排列方向

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

3.2 flex-wrap

flex中的item默认排列在轴线上，当一条轴线排不下就涉及到换行问题，那么换不换，如何换就是flex-wrap负责。

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

wrap-reverse会让第一行跑下面去，如下所示

nowrap
1 2 3 4 5 6
wrap
1 2 3 4
5 6
wrap-reverse
5 6
1 2 3 4

3.3 flex-flow

flex-flow是direction和wrap简写

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

默认是row nowrap

3.4 justify-content

items在主轴上的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
space-between：两端对齐，每个项目间距一致
|1    2    3|
space-around：两边item间隔相等，item间的间隔是两边间隔的两倍
| 1  2  3 |
空格数：
 1 2 2 1

3.5 align-items

items在交叉轴上的排列方式

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

stretch(默认值): 如果项目未设置高度或为auto，将占满整个容器高度
baseline：项目的第一行文字的基线对其

3.6 align-content

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

4 项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 order

定义项目的排列顺序，数值越小，排列越靠前，默认0

.item {
  order: <integer>;
}

4.2 flex-grow

就是android中的组件的weight属性

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

4.3 flex-shrink

定义项目的缩小比例，默认是1，如空间不足，项目将缩小

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

4.4 flex-basis

设置item的基础大小。浏览器根据这个属性，计算主轴是否有多余空间，默认是auto

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

4.5 flex

flex是flex-grow，flex-shrink和flex-basis的缩写，默认是 0 1 auto。

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

4.6 align-self

align-self用于单个项目有其他项目不一样的对其方式。

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