Flex 布局教程

Flex 布局教程

1. 基础背景

Flexbox Layout是W3C提出的一种新的布局方式，旨在为页面布局、对齐方式、边距设置提供一种更简便的方法。flex layout 可以使容器（container）来自动调整每个item的宽度和高度来适应container中可用的空间。它可以使container调整item来占满内部空间，或者使item缩放来避免overflow。

更重要的是，flex layout 与传统布局 (盒模型 + display属性+ position属性+float属性)不同，它是一种方向无关（direction-agnostic）的布局方式,而传统布局中block元素是vertical-based,inline元素是horizontal-based。对于复杂的布局方式，传统布局显得不够灵活。比如，垂直居中就不容易实现。因此这也是flex由来的原因。

注意：Flexbox layout 比较适合于应用的组件和小型的布局，而大型的布局推荐使用(Grid)[#]。

2. 基础知识和术语

Flexbox 是一整套布局模型，而不是单一的元素属性。这意味着它包含了很多元素属性，有些属性有些是设置在容器上（父布局，flex container），而另一些是用在子元素上（flex item）。

如果传统布局是基于block（块级元素）和inline(行级元素)组成的文档流，那么Flexbox 布局则是基于flex-flow directions。请看下图：

一般的，flex item 会沿着main axis（从 main start 到 main end） 或者 cross axis （从 cross start 到 cross end） 进行布局。

• main size : 指flex item 的宽度或者高度（图上main size 有点偏差>_<），沿着main axis 方向。
• cross size :指flex item 沿着cross axis方向的宽度或者高度。
• main axis：是flex container的主轴，每个flex item 沿着它进行排列。main axis 并不一定是水平的，这要根据flex-direction 属性来进行判断。
• cross axis : 是flex container中垂直于main axis 的轴线，它的方向取决于main axis。
• main start | main end：flex item 在flex container 中从main start 到 main end 沿着main axis 进行排列。
• cross start | cross end : 同上，flex item 沿着cross axis 从 cross start 到 cross end进行排列。

3. (flexbox container)容器属性

容器属性主要包括：

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

下面我们来看看每个属性的具体含义。

3.1 display 属性

该属性决定了元素显示的方式（inline or block）,当设置为flex 时，它为子元素提供了flex（灵活）的布局环境。

.flex-container {  display: -webkit-flex; /* Safari */  display: flex;}

或者如果想显示行级元素效果：

.flex-container {  display: -webkit-flex; /* Safari */  display: flex;}

3.2 flex-direction 属性

flex-direction 决定了main axis 的方向，即 flex item 的排列方向。

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

Value ：

• row ： 默认值，从左到右（ltr）;从右到左（rtl）；
• row-reverse ： 从右到左（ltr）；从左到右（rtl）；
• column : 同row，从上到下。
• column ：同row-reverse，从下到上。

3.3 flex-wrap 属性

默认情况下，flex item 排列在一条轴线上，flex-wrap 属性定义，如果排列不下，如何换行。

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

Vaule :

• nowrap : 默认，single line 不换行。

  

• wrap : multi-line , 占满屏幕时换行，第一行在上方。 left-to-right and top-to-bottom。（ltr）
  

• wrap-reverse ： 换行，第一行在下方。left-to-right and bottom-to-top。（ltr）

  

3.4 flex-flow 属性

flex-flow 属性是flex-direction 和 flex-wrap 属性的简写形式，默认为：row nowrap.

.flex-container {  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */  flex-flow:         <flex-direction> || <flex-wrap>;}

3.5 justify-content 属性

justify-content 属性定义了flex item 在主轴(main axis)上的对齐方式。

.flex-container {  -webkit-justify-content: flex-start; /* Safari */  justify-content:         flex-start;}

Value :

• flex-start : 默认值，左对齐。

  

• flex-end : 右对齐。

  

• center ： 居中对齐。

  

• space-between : 每个flex item 之间具有相同的间距，第一个和最后一个flex item与边框对齐。

  

• space-around : 每个flex item 周围都具有相同的边距，包括第一个和最后一个。

  

3.6 align-items 属性

align-items 属性定义了flex item 在交叉轴（cross axis）上的显示方式，与 justify-content 相似，但是在垂直方向上。

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

Value :

• stretch : 默认值，如果flex item 没有设置高度或为auto，flex item 将填满父布局，从cross start 到 cross end。

  

• flex-start : flex item 按照交叉轴（cross axis）起点 对齐。

  

• flex-end ： flex item 按照交叉轴终点对齐。

  

• center ： flex item 按照交叉点的终点对齐。

  

• baseline : flex item 按照文字的基线对齐，请查考baseline。

  

3.7 align-content 属性

align-content 属性定义了flex container 中多根轴线（main axis）的对齐方式。如果flex container 只有一行该属性不起作用。

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

Value :

• stretch : 默认值，main axis 占满整个cross axis。

  

• flex-start : main axis 沿着cross axis 从 cross start 开始 向 cross end 堆叠。

  

• flex-end ： main axis 沿着 cross axis 从 cross end 开始 向 cross start 堆叠。

  

• center ： main axis 与 cross axis 中心对齐，向 cross end 堆叠。

  

• space-between ： main axis 保持中间间距相同，最上面和最下面的主轴靠边框对齐。

  

• space-around ： main axis 保持相同的间距，包括最上面和最下面的主轴。

  

3.8 Flex container 属性注意事项

• 所有的 column-* 属性对于 flex container 无效。
• ::first-line 和 ::first-letter 伪元素 无法应用在flex-container 上。

4. (flexbox item) 项目属性

项目属性主要包括：

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

下面来详细学习每个属性的具体含义：

4.1 order 属性

order属性定义了flex item 在 flex container 中排列的顺序，默认为代码中添加的顺序，默认为0 ，数值越小越靠前排列。

.flex-item {  -webkit-order: <integer>; /* Safari */  order:         <integer>;}

4.2 flex-grow 属性

flex-grow 属性定义了flexbox container剩余空间的放大比例。默认值为0，即：即使有多余的空间，也不放大。如果每个flexbox item 的 flex-grow 都为1 ，那么它们将平分flexbox container 所剩余的空间。如果flexbox item 的值为2，则它将比其他item 占据2倍的剩余空间。

.flex-item {  -webkit-flex-grow: <number>; /* Safari */  flex-grow:         <number>;}

所有flexbox item 的 flex-grow 属性均为1，则它们将有相同的尺寸：

某一flexbox item 的flex-grow 属性为3，则它将比其他item占据3倍的剩余空间尺寸：

注：负数无效。

4.3 flex-shrink 属性

flex-shrink 属性定义了flexbox item 缩小比例，默认为1，即如果空间不足，将按照比例进行缩小。0表示保持原始大小，不进行缩小。

.flex-item {  -webkit-flex-shrink: <number>; /* Safari */  flex-shrink:         <number>;}

注：负数无效。

4.4 flex-basis 属性

flex-basis 属性定义了flexbox item 初始化大小（main size），默认值为 auto。跟width 和 height 具有相同的属性值。

.flex-item {  -webkit-flex-basis: auto | <width>; /* Safari */  flex-basis:         auto | <width>;}

4.5 flex 属性

flex属性是flex-grow flex-shrink flex-basis 属性的简写，默认值为： 0 1 auto。

.flex-item {  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];}

注：推荐使用flex 简写属性，flex 会智能的设置其他默认属性。common uses

4.6 align-self 属性

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

4.7 flex items 属性注意事项

• float 、clear 和 vertical-align 属性对 flex-item 不起作用。

5. 给flexbox添加前缀

@mixin flexbox() {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;}@mixin flex($values) {  -webkit-box-flex: $values;  -moz-box-flex:  $values;  -webkit-flex:  $values;  -ms-flex:  $values;  flex:  $values;}@mixin order($val) {  -webkit-box-ordinal-group: $val;    -moz-box-ordinal-group: $val;       -ms-flex-order: $val;       -webkit-order: $val;    order: $val;}.wrapper {  @include flexbox();}.item {  @include flex(1 200px);  @include order(2);}

6. 浏览器兼容

Broken up by “version” of flexbox:

• (new) means the recent syntax from the specification (e.g. display: flex;)
• (tweener) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
• (old) means the old syntax from 2009 (e.g. display: box;)

Chrome Safari Firefox Opera IE Android iOS 20-(old) 21+(new) 3.1+(old) 6.1+(new) 2-21(old) 22+(new) 12.1+(new) 10(tweener) 11+(new) 2.1+(old) 4.4+(new) 3.2+(old) 7.1+(new)

参考：

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties