传统的CSS布局方法是基于盒子模型（根据盒子与父盒子以及相关盒子到指定尺寸的关系） 和位置算法），执行取决于区块、inline、桌子，位置 float 这些属性对于某些特殊布局（例如垂直居中）来说并不容易实现。

Flexbox布局是一种新的布局方法，称为FlexibleLayout，它允许子元素（ITEMS）灵活，响应地适应父容器空间（） .灵活的容器）允许元素轻松水平和垂直对齐，即使子元素的大小未知或动态。盒子模型

相对于流向blok和inline放置，而灵活布局基于弹性流向（ 弯曲-流向），基本思路如下图所示。容器

flex 中的子元素将沿着主轴 （从 main start 到 main end）或交叉轴（从交叉起点到交叉终点）用于放置在以下位置：

• 主轴 - 主轴,子元素排列轴的基础，请注意，不一定是水平的，取决于属性flex-direction
• main-start | 的配置main-end - 从main start到main end的子元素灵活地放置在容器中。默认情况下，它们排列成一行。 不会包裹 ，除非设置了 flex-wrap
• main size 属性。 - 子元素的主尺寸，如果主轴是水平的，则width为主尺寸；垂直，则 高度 是主要尺寸
• 横轴 - 垂直于主轴的轴称为 横轴 ，方向取决于主轴 的方向横向起点| cross-end - 当子元素 包裹 时，每行从交叉起点到交叉终点之间间隔
• cross-size - 与主尺寸相同，但相反flex容器使用以下代码将HTML元素指定为FLEX布局：

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

  此元素称为FLEXContainer，内部的其他HTML元素称为称为弯曲对象。 flex 容器 有 6 个属性：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items 对齐内容

  flex-direction

  

  指定主轴的方向，即内部单元排列的弹性方向。撇开换行不谈，Flexbox 是一个单向布局的概念，它始终将元素放置在水平行或垂直列。

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

  • row（默认）：主轴水平，从左到右排列
  • row-reverse：主轴水平，从右到左排列
  • column：主轴垂直，从上到下排列
  • column-reverse：主轴垂直，从下到上排列

  flex-wrap

  

  默认情况下，子元素不会换行，只会放置在同一行（或列）中。您可以使用此属性 设置换行符 。

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

  • nowrap（默认）：无换行
  • wrap：换行，第一行在顶部
  • wrap-reverse：换行，第一行在底部

  flex-flow

  flex 属性的缩写-方向和柔性包裹。

  flex-flow: <'flex-direction'> || <'flex-wrap'>

  默认为：flex-flow: row nowrap

  justify-content

  

  定义子元素在长轴上的对齐方式。

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

  • flex-start（默认 ）：左对齐，与长轴的起点对齐
  • flex-end：右对齐，与长轴的终点对齐
  • center：居中，与长轴中心对齐 点对齐
  • space- Between：两端对齐，子元素等间距
  • space-around：子元素两侧等间距，使得子元素之间的间距相等元素恰好是边框间距的两倍
  • 空间均匀：子元素间隔开且间隔开，两个元素之间的距离等于到边框的距离

  align-items

  

  指定子元素如何对齐 交叉轴。

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

  • stretch（默认）：如果子元素未指定高度或设置为auto，它将拉伸以填充容器的高度
  • flex-start：与起始位置对齐横轴的点
  • flex-end：与横轴的终点对齐
  • center：与横轴的中心对齐
  • baseline：与子文本第一行的基线对齐

  align-content

  

  定义容器对齐内部多行元素的线，类似于justify-content定义主轴内元素的对齐方式。？对齐横轴起点

• flex-end：与横轴终点对齐
• center：与横轴中心对齐
• space- Between：在横轴上对齐两端，两端之间等间隔line
• space-around：每行两边的间距相同，因此行距正好是边框间距的两倍

Flex Items

Flex 容器内的子项也有 6 个属性，分别是是：

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

order

默认情况下，元素是对齐的在原来的顺序布局，但是这个属性可以控制Flex容器中元素的显示顺序。值越小则越高。默认值为 0。

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

flex-grow

定义元素根据需要 增长的能力 ，例如，如果容器仍有空间。 默认为0，如有空格则不展开。

如果所有元素都设置为1，则容器中的剩余空间将被平分；如果一个元素的值为 2，则它将占用其他元素两倍的空间（至少尝试这样做）。

注意：负值无效。

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

Flex-Shrink

确定元素在需要时 收缩的能力 ， 默认为 1，即如果没有足够的空间，元素将收缩。

相对而言，如果所有元素的该属性值为1，则当空间不足时，它们会按比例减少；如果空间不足时，一个元素为0，另一个元素为1，则第一个元素不会被减少。

注意：负值无效。

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

flex-basis

指定在将剩余空间分配给容器之前， 如何确定子元素 的大小。浏览器根据这个属性计算主轴剩余空间的大小。

的值可以设置为特定长度（例如20%、5rem）或关键字（auto）。 默认为自动。元素的大小基于主尺寸。如果主大小为 auto，则使用元素内容的最大长度。当子单元

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

弹性伸长时，弯曲底座的差异会导致不同的结果。下面的数字分别是“绝对”（从0开始计数）弹性和“相对”（从元素内容长度开始计数）差值灵活性。

三个子元素的flex-grow值为1:1:2：

• 如果flex-basis:0，浏览器会认为子元素的大小为0，剩余空间为整个容器空间，那么会按照1:1:2的比例分配整个容器空间
• 如果flex-basis:auto，浏览器会认为子元素的大小就是宽度计算剩余空间并分配比例为1:1:2 对于这三个单元

，由于浏览器计算的主轴剩余空间大小不同，单元的弹性结果不同。

flex

属性有 flex-grow、flex-shrink 和 flex-basis的缩写，其中第二个和第三个参数（ flex-收缩和弯曲基础）是可选的。

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

默认为flex: 0 1 auto，建议先使用该属性，它有两个好用的关键字：auto(1 1 auto)和无（0 0 自动）.

align-self

允许项目 覆盖默认值 或使用 align-items 指定对齐。

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

除auto外，其他属性值均符合align-items。

注意：浮动、清除和垂直对齐不适用于弹性容器内的元素。

浏览器支持

：

• 红色 - 表示不支持版本
• 绿色 - 指示前缀的零件支持。就是支持的版本

最后回到问题，对于常用的垂直居中，只需将flex容器的align-items和justify-content属性设置为center即可。