HTML布局方式Flex属性详解

背景

flexbox布局方式旨在容器中的元素在排版，对其，剩余空间处理的问题上提供一个高效的解决方式，无论子元素的大小是已知或未知，动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的空间。

而且，相比于规则的布局方式如block，inline，flexbox布局方式对于子元素的排列方向也是任意的。

注意：flexbox布局更加适合于应用组件或者小尺寸的布局，对于大尺寸布局，grid更加适合。

一、flex容器属性

1.1 display属性

定义一个容器为flexbox布局，设置其display为flex即可。 该布局仅仅影响其直接子元素。

.container {
  display: flex; /* or inline-flex */
}

注意css3的columns属性对于flex容器是没有效果的。

1.2 flex-direction属性

flexbox布局是属于单方向布局，意思即子元素的排列方向是横向或者纵向。flex-direction的作用就是这只子元素排列方向。flex-direction有四个可选值：row、row-reverse、column、column-reverse.

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

row（默认值）：从左到右

row-reverse：从右到左

column：从上到下

column-reverse：从下到上

1.3 flex-wrap属性

默认的情况下，flex容器会尝试把所有的直接子元素摆放在一排，但是你可以通过设置flex-wrap属性的值来改变这一 布局方式。flex-wrap有四个值：nowrap、wrap、wrap-reverse

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

nowrap：该值为默认值，所有的子元素都在一行

wrap：子元素会自动向下换行

wrap-reverse：子元素会自动向上换行

1.4 flex-row属性

这个属性是flex-direction和flex-wrap的简写。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

1.5 justify-content属性

justify-content属性有五种属性：flex-start、flex-end、center、space-between、space-around、space-evenly，如果flex-direction方向为row，则这五种属性对于子元素的影响如下：

flex-start (默认): 子元素从开始位置挨着排放
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中，每个子元素前面的距离都是一样的，但是子元素之间的距离并不是一样，第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的，包括第一个和最后一个到边缘的距离。

如果flex-direction属性为column，属性含义相同，对应的是垂直方向布局。

1.6 align-items属性

如果flex-direction方向为row，aign-items属性为元素在垂直方向的布局方式，有五种值：flex-start、flex-end、center、stretch、baseline，这五种值对子元素的影响：

flex-start: 元素垂直方向从上开始摆放
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)

如果flex-direction属性为column，则对应的为水平布局方式。

1.7  align-content属性

这个属性是对多行元素起作用的。例如换行，该元素有五个值，对子元素的影响如下图所示：

flex-start: 顶部对齐
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐，第一个元素在顶部，最后一个元素在底部
space-around: 垂直均匀对齐，每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器

二 子元素属性

2.1 order属性

默认情况下，flexbox里面的子元素是按照代码的顺序排列的，但是如果给子元素设置了order属性，则会按照oder大小从左往右或者从右往左排序。

具体使用方法：

.item {
  order: <integer>; /* default is 0 */
}

2.2 flex-grow属性

这个属性可以让子元素在有必要的时候会自动增长。他接受一个没有单位的值作为增长的比例，他表示该子元素应该占用容器剩余空间的多少。

如果所有的子元素flex-grow设置为1，那么容器中剩余的空间会均匀的分配各所有子元素，如果其中一个子元素的flex-grow设置为2，那么flexbox布局将会试着分配给他的空间是其他子元素的两倍。

具体使用方法：

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

注意：只是接受非负的数字

2.3 flex-shrink属性

赋予子元素收缩的能力，类似于flex-grow

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

2.4 flex-basis属性

在分配容器剩余的空间前，定义一个元素默认的尺寸。尺寸的值可以是百分数或者具体的尺寸，也可以是关键字auto，当设置为auto的时候，表示参考我的长和宽（在main-size关键字被弃用之前是参考这个值的）。当设置的关键字是content的时候，表示根据子元素的内容来设置其尺寸，但是这个关键字目前支持的不是很好。

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

如果值设置为  0, 包含内容的额外的空间不会考虑在内。 如果设为 auto, 额外的空间是一句flex-grow设置的值来分配的。

2.5 flex属性

这个属性是flex-grow、flex-shrink、flex-basis三个属性的简写，第二个和第三个值书可选的。flex默认值为0 1 auto

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

强烈推荐使用这个flex而不是单独设置各个不同的属性。

2.6 align-self属性

作用同align-items，只是这个属性是作用到子元素的，对某个子元素单独设置align属性

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

注意：float，clear、vertical-align对于flex元素没有作用。

bugs：https://github.com/philipwalton/flexbugs