简介

flex，是flexible box的缩写，意为弹性布局，为盒模型提供一定的灵活性。是2009年W3C提出的一种布局方案，支持IE10+。

语法

采用 Flex 布局的元素，称为容器。它的所有子元素自动成为容器成员，称为项目。

1
2
3
4
5
6
7
8
// 任何容器都可以指定为弹性布局，设置后子元素的float，clear，vertical-align属性失效
.box{
  display: flex;
}
// 行内元素可以设置inline-flex，设置后可以设置宽度
.box{
  display: inline-flex;
}
1. 设置在容器上的属性
1
2
3
4
5
6
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.1 flex-direction

规定方向

1
2
3
4
// （默认）水平方向，从左到右 | 水平方向，从右到左 | 垂直方向，从上到下 | 垂直方向，从下到上
.box{
  flex-direction: row | row-reverse | column | column-reverse; 
}
1.2 flex-wrap
1
2
3
4
// （默认）不换行 ｜ 换行 ｜ 换行，第一行在下方
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
1.3 flex-flow

Flex-flow是flex-direction和flex-wrap的简写

1
2
3
4
// 默认
.box{
  flex-flow: row nowrap;
}
1.4 justify-content

水平方向上的对齐方式

1
2
3
4
// （默认）左对齐
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
1.5 align-items

垂直方向上的对齐方式

1
2
3
4
// （默认）stretch:如果项目没有设置高度或设为auto，将占满整个容器的高度。 baseline:项目的第一行文字的基线对齐
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
1.6 align-content

多根轴线（多行）的垂直方向上的对齐方式，如果只有一根轴线，则不起作用

1
2
3
4
// （默认）stretch:轴线占满整个垂直方向
.box{
  align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}
2. 设置在项目上的属性
1
2
3
4
5
6
order
flex-grow
flex-shrink
flex-basis
flex
align-self
2.1 order

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

1
2
3
.item{
  order: <integer>;
}
2.2 flex-grow

定义项目的放大比例，默认为0，即有剩余空间也不放大。

2.3 flex-shrink

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

2.4 flex-basis

定义了在分配剩余空间之前，项目在水平方向占据的空间大小，默认为auto，即项目本来的大小，浏览器根据这个属性计算剩余空间大小。可以像width属性一样设置（如500px），则项目将占据固定空间。

2.5 flex

flex属性是flex-grow, flex-shrink, flex-basis的简写，默认为0 1 auto，后两个属性可选。建议用此属性！而不是分离的写三个属性，因为浏览器会推算相关值(?)

1
2
3
4
// 该属性有两个快捷值，auto（1 1 auto）和none（0 0 auto）
.item {
 flex: auto | none;
}
2.6 align-self

允许不同于其他项目的对齐方式，覆盖align-items，默认值为auto，即继承父元素的align-items属性，如果没有父元素，则等同stretch，该属性可取6个值，除了auto，其余的都和align-items一致。

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