I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

Flexbox布局详解

在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目的,而其中出现的bug和浏览器的差异性使用对布局失去兴趣。
Flexbox通常能让我们更好的操作他的子元素布局,例如:

如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;
可以快速让他们布局在一列;
可以方便让他们对齐容器的左、右、中间等;
无需修改结构就可以改变他们的显示顺序;
如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

flexbox的术语:
伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素
伸缩项目:伸缩容器的子元素
主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。
主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

属性:
1.display(flex container)

1
display: other values | flex | inline-flex;

2.flex-direction(flex container)

这个主要用来创建主轴,从而定义了伸缩项目放置在伸缩容器的方向。

1
flex-direction: row | row-reverse | column | column-reverse

row(默认值):在“ltr”排版方式下从左向右排列;在“rtl”排版方式下从右向左排列。
row-reverse:与row排列方向相反,在“ltr”排版方式下从右向左排列;在“rtl”排版方式下从左向右排列.
column:类似 于row,不过是从上到下排列.
column-reverse:类似于row-reverse,不过是从下到上排列。

3.order(flex items)
默认情况下,伸缩项目是按照文档流出现先后顺序排列。然而,“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

1
order: <integer>

4.flex-wrap(flex container)
这个主要用来定义伸缩容器里是单行还是多行显示,侧轴的方向决定了新行堆放的方向。

1
flex-wrap: nowrap | wrap | wrap-reverse

nowrap(默认值):伸缩容器单行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
wrap:伸缩容器多行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
wrap-reverse:伸缩容器多行显示,“ltr”排版下,伸缩项目从右向左排列;“rtl”排版下,伸缩项目从左到右排列。(和wrap相反)

5.flex-flow(flex container)
这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

1
2
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
div { flex-flow: row; }/* Initial value. Main-axis is inline, no wrap. */

1
div { flex-flow: row-reverse wrap-reverse; }/* Main-axis is the opposite of inline direction(right to left). New lines wrap upwards. */

6.justify-content(flex container)
这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时,这一属性才会对多余的空间进行分配。当项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制。

1
justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(默认值):伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。
space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

7.align-content(flex container)
这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。

1
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

8.align-items(flex container)

1
align-items: flex-start | flex-end | center | baseline | stretch

flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
center:伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline:伸缩项目根据他们的基线对齐。
stretch(默认值):伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

9.align-self(flex items)
用来在单独的伸缩项目上覆写默认的对齐方式。

1
align-self: auto | flex-start | flex-end | center | baseline | stretch;

10.flex-grow(flex items)
根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

1
flex-grow: <number>; /* default 0 */

如果所有伸缩项目的“flex-grow”设置了“1”,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。如下图:

11.flex-shrink(flex items)
根据需要用来定义伸缩项目收缩的能力。[注意:负值同样生效。]

1
flex-shrink: <number>; /* default 1 */

12.flex-basis(flex items)
这个用来设置伸缩基准值,剩余的空间按比率进行伸缩。

1
flex-basis: <length> | auto; /* default auto */

如果设置为“0”,不考虑剩余空白空间。如果设置为自动,则按照flex-grow值分配剩余空白空间。如图所示:

13.flex(flex items)
这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。默认值为“0 1 auto”。

1
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其它资料:

[1]使用 CSS 弹性盒
[2]一个完整的Flexbox指南
[3]Flexbox——快速布局神器