Flex 容器属性

一、Flex 容器属性概览

以下 6 个属性都是设置在 Flex 容器上：

二、flex-direction 设置主轴方向

2.1 基本说明

• flex-direction 属性决定了 Flex 容器的主轴方向
• 即 Flex 项目的排列方向
• 默认主轴方向就是 x 轴，水平向右
• 默认交叉轴就是 y 轴，垂直向下

2.2 属性值

2.3 语法

/* 主轴为行（x轴），水平向右 */
flex-direction: row;

2.4 案例演示

<style>
  .flex-container {
    display: inline-flex;
    flex-direction: row; /* 可选值：row、row-reverse、column、column-reverse */
    padding: 10px;
    background-color: skyblue;
  }
  .flex-item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    margin: 10px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

不同值的效果：

• row - 从左到右水平排列
• row-reverse - 从右到左水平排列
• column - 从上到下垂直排列
• column-reverse - 从下到上垂直排列

三、flex-wrap 项目如何换行

3.1 基本说明

• 默认情况下，项目都排在一条线（又称"轴线"）上排列
• flex-wrap 属性定义，如果项目在一条轴线（主轴）排不下时，如何换行

3.2 属性值

3.3 语法

/* 放不下时，不换行 */
flex-wrap: nowrap;

3.4 案例演示

<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap; /* wrap、nowrap、wrap-reverse */
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: skyblue;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    margin: 5px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

不同主轴方向下的效果：

主轴为 row（水平方向）时：

• nowrap - 不换行，元素被压缩
• wrap - 换行，第一行在上方
• wrap-reverse - 换行，第一行在下方

主轴为 column（垂直方向）时：

• nowrap - 不换行，元素被压缩
• wrap - 换行，第一列在左边
• wrap-reverse - 换行，第一列在右边

四、flex-flow 主轴方向和项目如何换行

4.1 基本说明

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

4.2 语法

flex-flow: row nowrap;

4.3 案例演示

<style>
  .flex-container {
    width: 100px;
    height: 200px;
    padding: 10px;
    background-color: skyblue;
    display: flex;
    flex-flow: column wrap; /* 等价于 flex-direction: column; flex-wrap: wrap; */
  }
  .flex-item {
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    margin: 5px;
    padding: 5px 10px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

五、justify-content 项目在主轴上对齐方式

5.1 基本说明

justify-content 属性定义了项目在主轴上的对齐方式。

5.2 属性值

5.3 语法

/* 项目在主轴上左对齐 */
justify-content: flex-start;

5.4 案例演示

<style>
  .flex-container {
    padding: 10px;
    background-color: skyblue;
    display: flex;
    justify-content: center; /* flex-start、flex-end、center、space-between、space-around、space-evenly */
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    margin: 5px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

效果说明：

• flex-start - 左对齐
• flex-end - 右对齐
• center - 居中对齐
• space-between - 两端对齐，项目之间的间隔相等
• space-around - 每个项目两侧的间隔相等（项目之间的间隔比项目与边框的间隔大一倍）
• space-evenly - 每个元素之间和元素距离边距的距离都相等

六、align-items 项目在交叉轴上对齐方式

6.1 基本说明

align-items 属性定义项目在交叉轴上如何对齐，只对单行有效。

6.2 属性值

6.3 语法

/* 默认值，项目未设置高度或设为auto，将占满整个容器的高度 */
align-items: stretch;

6.4 注意事项

• align-items 的值不是 stretch 时，其项目未设置高时，其高为内容大小，并不会拉伸到容器高度

6.5 案例演示

<style>
  .flex-container {
    height: 200px;
    background-color: skyblue;
    display: flex;
    align-items: baseline;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 0 5px;
  }
  .flex-item:nth-child(1) {
    height: 50px;
    font-size: 14px;
  }
  .flex-item:nth-child(2) {
    height: 100px;
    font-size: 40px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

效果说明：

• stretch - 项目未设置高度时拉伸到容器高度
• flex-start - 交叉轴起点对齐
• flex-end - 交叉轴终点对齐
• center - 交叉轴中点对齐
• baseline - 基线对齐

6.6 换行时的效果

当项目放不下，换行时：

• 可以把每一行看作一个新的 flex 容器
• align-items 控制项目在这个新容器的交叉轴上的对齐方式
• 每一行容器占的高度 = 当前行最高元素的高 +（容器高 - 所有行最高的那一个元素的高之和）/ 行数

<style>
  .flex-container {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 0px 5px;
  }
  .flex-item:nth-child(2) {
    height: 100px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

七、align-content 多根轴线对齐方式（多行）

7.1 基本说明

• align-content 属性定义了多根轴线在交叉轴上的对齐方式
• 如果项目只有一根轴线，该属性不起作用

7.2 属性值

7.3 语法

/* 多行在交叉轴上居中对齐 */
align-content: center;

7.4 案例演示

<style>
  .flex-container {
    height: 300px;
    width: 300px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around; /* flex-start、flex-end、center、space-between、space-around、stretch */
  }
  .flex-item {
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background-color: tomato;
    padding: 5px 10px;
    margin: 5px;
  }
  .flex-item:nth-child(1) {
    height: 50px;
  }
  .flex-item:nth-child(2) {
    height: 100px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
</div>

效果说明：

• flex-start - 与交叉轴起点对齐
• flex-end - 与交叉轴终点对齐
• center - 与交叉轴中点对齐
• space-between - 与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around - 每根轴线两侧的间隔相等
• stretch - 轴线占满整个交叉轴（项目没有设置高度时生效）