Flex弹性盒布局2

SS Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

• 块（Block），用于网页中的部分（节）
• 行内（Inline），用于文本
• 表，用于二维表数据
• 定位，用于元素的明确位置

• Flexbox 元素

  如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。

• 上面的元素表示一个带有三个 flex 项目的 flex 容器

• 父元素（容器）

  通过将 display 属性设置为 flex，flex 容器将可伸缩：

  .flex-container {
    display: flex;
  }

  ---

  flex-direction 属性

  flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

• column 值设置垂直堆叠 flex 项目（从上到下）：

  .flex-container {
    display: flex;
    flex-direction: column;
  }

  ---

  column-reverse 值垂直堆叠 flex 项目（但从下到上）：

  .flex-container {
    display: flex;
    flex-direction: column-reverse;
  }

  ---

  row 值水平堆叠 flex 项目（从左到右）：

  .flex-container {
    display: flex;
    flex-direction: row;
  }

  ---

  row-reverse 值水平堆叠 flex 项目（但从右到左）：

  .flex-container {
    display: flex;
    flex-direction: row-reverse;
  }

  ---

  wrap 值规定 flex 项目将在必要时进行换行：

  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }

  ---

  nowrap 值规定将不对 flex 项目换行（默认）：

  .flex-container {
    display: flex;
    flex-wrap: nowrap;
  }

  ---

  wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

  .flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
  }

  ---

  flex-flow 属性

  flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

  .flex-container { display: flex; flex-flow: row wrap; }

  ---

  center 值将 flex 项目在容器的中心对齐：

  .flex-container {
    display: flex;
    justify-content: center;
  }

  ---

  flex-start 值将 flex 项目在容器的开头对齐（默认）：

  .flex-container {
    display: flex;
    justify-content: flex-start;
  }

  ---

  flex-end 值将 flex 项目在容器的末端对齐：

  .flex-container {
    display: flex;
    justify-content: flex-end;
  }

  ---

  space-around 值显示行之前、之间和之后带有空格的 flex 项目：

  .flex-container {
    display: flex;
    justify-content: space-around;
  }

  ---

  center 值将 flex 项目在容器中间对齐：

  .flex-container {
    display: flex;
    height: 200px;
    align-items: center;
  }
  

• ---

  flex-start 值将 flex 项目在容器顶部对齐：

  .flex-container {
    display: flex;
    height: 200px;
    align-items: flex-start;
  }
  

  flex-end 值将弹性项目在容器底部对齐：

  .flex-container {
    display: flex;
    height: 200px;
    align-items: flex-end;
  }
  

  ---

  stretch 值拉伸 flex 项目以填充容器（默认）：

  .flex-container {
    display: flex;
    height: 200px;
    align-items: stretch;
  }
  

  ---

  baseline 值使 flex 项目基线对齐：

  .flex-container {
    display: flex;
    height: 200px;
    align-items: baseline;
  }