简介

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。目标在于提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。

Flex布局的主要思想是使父元素能够调节子元素的高度、宽度和排布的顺序，从而能够最好地适应可用布局空间（能够适应不同的设备和不同大小的屏幕）。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，与传统布局中块状元素按照垂直方向摆放，行内元素按照水平方向摆放相比，flex布局是无方向的。传统布局在应对大型复杂的布局时缺乏灵活性，特别是在改变方向、改变大小、伸展、收缩等等方面。

使用Flex布局很简单，只需要将父元素设置为：

.box{
  display: -webkit-flex; /* Safari */
  display: flex;  
  /* 行内元素设置为 display: inline-flex*/
}

基本概念

  • 容器(container)

也就是父元素，包含所有的需要进行布局的元素。

  • 项目(item)

容器里面所有的子元素

  • 主轴(main axis)

子元素布局的主要方向，默认是水平方向，可以通过flex-direction进行设置

  • 交叉轴(cross axis)

与主轴垂直的方向轴

  • 主尺寸(main size)

单个项目占据主轴的长度大小

  • 交叉尺寸(cross size)

子元素在交叉轴方向上的大小

  • 主轴开始/结束(main start/main end)

分别表示主轴的开始和结束，子元素在父元素中会沿着主轴从main-start到main-end排布

  • 交叉轴开始/结束(cross start/cross end)

分别表示交叉轴的开始和结束。子元素在交叉轴的排布从cross-start开始到cross-end

这些概念可以很清晰地用下面的这张图进行表示：
Flex 基本概念

容器属性

  • flex-direction

主轴的方向，有四个取值:
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-direction

  • flex-wrap

规定如何换行，有三个取值：
- nowrap（默认）：不换行

- wrap：换行，第一行在上方

- wrap-reverse：换行，第一行在下方

  • flex-flow

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

  • justify-content

justify-content属性定义了项目在主轴上的对齐方式，有5个取值：
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

  • align-items

align-items属性定义项目在交叉轴上如何对齐，有五个取值：
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

  • align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，有6个取值：
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。

项目属性

  • order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

  • flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有的子元素的属性都设定为1，则父元素中的剩余空间会等分给所有子元素。如果其中某个子元素的flex-grow设定为2，则在分配剩余空间时该子元素将获得其他元素二倍的空间。

  • flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

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

  • flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

  • flex

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

  • align-self

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

实例

  • 水平垂直居中一

.parent {
  background:green;
  display: flex;
  height: 100px; /* 随意设定大小 */
}
.child {
  width: 40px;  /* 随意设定大小，比父元素要小 */
  height: 40px; /* 同上 */
  margin: auto;  /* 见证奇迹的时刻 */
  background:red;
}
- #### 水平垂直居中二 ```css .parent{ background:green; display:flex; justify-content:center; align-items:center; height:100px; } .child{ height:40px; width:40px; background:red; } ```