flex 容器属性（二） | 每天学一点flex
“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情
Flexbox布局有两种主要的组件：容器（container）和项目（item）。容器属性指的是容器元素上设置的一些布局属性，这些属性将会影响容器中的项目的布局。
接下来我们来看一下部分容器属性， justify-content、align-items、align-content 属性。
容器属性
1. justify-content 属性
justify-content 属性用于设置项目在主轴上的对齐方式，可以设置的属性值有 6 个，如下表：
| 属性值 | 描述 |
|---|---|
| flex-start（默认值） | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等。 |
| space-around | 均匀排列每个元素，每个元素周围分配相同的空间 |
| space-evenly | 均匀排列每个元素，每个元素之间的间隔相等 |
接下啦我们来看一下每一种属性值所对应的不同效果。
justify-content 属性值为 flex-start 时，代表以左对齐的方式排列。
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
justify-content: flex-start; /* 设置项目的水平对齐方式 */
}
/* 项目 css */
.item {
width: 60px; /* 将项目的值重新还原为 60px */
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
效果如下：
justify-content 属性值为 flex-end 时，效果如下： justify-content 属性值为 center 时，效果如下： justify-content 属性值为 space-between 时，效果如下： justify-content 属性值为 space-around 时，效果如下： justify-content 属性值为 space-evenly 时，效果如下：
2. align-items 属性
align-items 属性用于设置项目在交叉轴（ y 轴）上面的对齐方式，可以设置的属性值有 5 个，如下表：
| 属性值 | 描述 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch（默认值） | 如果项目未设置高度或设为 auto，将占满整个容器的高度。 |
各属性值的效果示意图如下：
该属性的默认值为 stretch，这是在项目没有高度的情况下，会撑满整个容器。示例如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
}
/* 项目 css */
.item {
width: 60px;
text-align: center;
line-height: 60px;
color: white;
}
效果如下：
接下来我们来看一下其他值所对应的效果。首先将项目的高度还原为 60px，然后将 align-items 属性值设置为 flex-start，如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
align-items: flex-start;
}
/* 项目 css */
.item {
width: 60px;
height: 60px; /* 高度还原为 60px */
text-align: center;
line-height: 60px;
color: white;
}
效果如下： align-items 属性值设置为 flex-end 时的效果如下： align-items 属性值设置为 center 时的效果如下：
值为 baseline 时，将以第一行文字的基线来进行对齐。 这里我们对第一个项目的字体进行设置，将 font-size 设置为 32px。示例如下：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
align-items: baseline; /* 对齐方式设置为 baseline */
}
/* 项目 css */
.item {
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
/* 每个项目背景颜色 */
.one {
background-color: red;
font-size: 32px; /* 第一个项目字体变大 */
}
效果如下：
3. align-content 属性
align-content 属性用于设置当存在多个主轴时的对齐方式。
如果项目只有一根轴线，则该属性不起作用。该属性可以设置的属性值有 6 个，具体如下表：
| 属性值 | 描述 |
|---|---|
| flex-start | 与交叉轴的起点对齐。 |
| flex-end | 与交叉轴的终点对齐。 |
| center | 与交叉轴的中点对齐。 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布。 |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 |
| stretch（默认值） | 轴线占满整个交叉轴。 |
各属性值的效果示意图如下：
接下来，我们来看一下实际的代码演示。
首先我们将项目的 width 设置为 150px，然后设置 flex-wrap 属性值为 wrap，从而得到多个主轴。最后设置 align-content 属性值为 flex-end，如下所示：
/* 容器 css */
.container {
width: 300px;
height: 300px;
outline: 1px solid;
margin: 100px;
display: flex; /* 设置该盒子为弹性盒 */
flex-wrap: wrap; /* 设置 wrap 使盒子有多根轴线 */
align-content: flex-end; /* 多根轴线时的对齐方式 */
}
/* 项目 css */
.item {
width: 150px; /* 项目宽度设置为 150px */
height: 60px;
text-align: center;
line-height: 60px;
color: white;
}
效果： align-content 属性值为 flex-start 时的效果： align-content 属性值为 center 时的效果： align-content 属性值为 space-between 时的效果： align-content 属性值为 space-around 时的效果： align-content 属性值为 stretch 时的效果：
