Flexbox 布局

什么是 Flexbox？

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

什么情况下不建议使用 Flexbox？

虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：

• 整体页面布局
• 完全支持旧浏览器的网站

浏览器支持 Flexbox 的情况：

旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合 float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。

在 Flexbox 模型中，有三个核心概念：

1、flex 项（注：也称 flex 子元素），需要布局的元素
2、flex 容器，其包含 flex 项
3、排列方向（direction），这决定了 flex 项的布局方向（注：更多的文章叫主轴）

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

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

注意：设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

属性总结表：

容器属性详述

• flex-direction

决定主轴的方向，即项目排列的方向，有四个可能的值：

属性	效果
row (默认)	主轴为水平方向，项目沿主轴从左至右排列
column	主轴为竖直方向，项目沿主轴从上至下排列
row-reverse	主轴水平，项目从右至左排列，与row反向
column-reverse	主轴竖直，项目从下至上排列，与column反向

• flex-wrap

默认情况下，item排列在一条线上，即主轴上，flex-wrap 决定当排列不下时是否换行以及换行的方式，可能的值：

属性	效果
nowrap (默认)	自动缩小项目，不换行
wrap	换行，且第一行在上方
wrap-reverse	换行，第一行在下面

• flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。

• justify-content

决定item在主轴上的对齐方式，可能的值有：

属性	效果
flex-start	左对齐
flex-end	右对齐
center	居中对齐
space- between	两端对齐
space-around	沿轴线均匀分布

• align-items

决定了 item 在交叉轴上的对齐方式，可能的值有：

属性	效果
flex-start	顶端对齐
flex-end	底部对齐
center	竖直方向上居中对齐
baseline	item第一行文字的底部对齐
stretch	当item未设置高度时，item将和容器等高对齐

• align-content

该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content可能值含义如下（假设主轴为水平方向）：

属性	效果
flex-start	左对齐
flex-end	右对齐
center	居中对齐
space- between	两端对齐
space-around	沿轴线均匀分布
stretch	各行将根据其flex-grow值伸展以充分占据剩余空间

Item 属性详述

item的属性在item的style中设置。item共有如下六种属性：

• order：order的值是整数，默认为0，整数越小，item 排列越靠前。

如下所示代码如下：

    
item 1
    
item 2
    
item 3
    
item 4

• flex-grow

定义了当flex容器有多余空间时，item 是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如：

    
item 1
    
item 2
    
item 3

即当有多余空间时item1、item2、和item3以1:2:3的比例放大。

• flex-shrink

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item 自动缩小。

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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。如下代码：

    
item 1
    
item 2
    
item 3

• flex：flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

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

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

属性	效果
auto （默认值）	和父元素align-self的值一致
flex-start	顶端对齐
flex-end	底部对齐
center	竖直方向上居中对齐
baseline	item第一行文字的底部对齐
stretch	当item未设置高度时，item将和容器等高对齐