在前端设计中，我们常常需要控制网页中的元素排布。在元素排布过程中，align-items 与 justify-content 是两项非常重要的 CSS 属性。它们可以让我们很方便地控制元素的位置和对齐方式。但是，在实际使用过程中，我们可能会遇到一些问题，例如元素位置不适当，对齐方式不理想等。这时，我们可以利用 CSS Flexbox 来解决这些问题。
CSS Flexbox 是什么
CSS Flexbox （Flexible Box Layout）是一种基于盒模型、且设计方向可以是水平或垂直的布局模型。它可以让我们更加方便地控制元素在一个容器中的排布，从而快速实现复杂的布局。
CSS Flexbox 布局模型依赖于容器和其内部的弹性盒子。其中，容器指的是包含弹性盒子的 HTML 元素，而弹性盒子则是容器内部的元素。在容器上应用的一些属性将会影响到其内部的所有弹性盒子元素。
为什么选择 CSS Flexbox
在 CSS3 引入 Flexbox 布局之前，前端开发者需要借助浮动、定位以及计算宽度等方式才能实现网页元素的排布。这些方式需要处理很多的细节，使得布局代码变得复杂。而 CSS Flexbox ，通过设置容器的属性，使得元素的排布变得更加直观、灵活，更加具有可读性和可维护性。
align-items 属性
CSS Flexbox 布局模型中，align-items 属性用来控制元素在垂直方向上的位置以及对齐方式。
| 属性值 | 描述 |
|---|---|
| flex-start | 元素位于容器的顶部 |
| flex-end | 元素位于容器的底部 |
| center | 元素位于容器的中间 |
| baseline | 元素位于容器的基线 |
| stretch | 元素沿容器的高度进行拉伸 |
下面是一个 align-items 的示例代码：
----------- ------------- ------------------- -
在上述代码中，我们设置了一个容器，它包含了若干个弹性盒子元素，其中 align-items 的属性值为 center 。这将使得容器中所有的弹性盒子元素都垂直居中对齐。
justify-content 属性
CSS Flexbox 布局模型中，justify-content 属性用来控制元素在水平方向上的位置以及对齐方式。
| 属性值 | 描述 |
|---|---|
| flex-start | 元素位于容器的左端 |
| flex-end | 元素位于容器的右端 |
| center | 元素位于容器的中间 |
| space-between | 弹性盒子元素平均分配容器 |
| space-around | 弹性盒子元素平均分配容器，会产生向左和向右的空间 |
下面是一个 justify-content 的示例代码：
----------- ------------- ----------------------- -
在上述代码中，我们设置了一个容器，它包含了若干个弹性盒子元素，其中 justify-content 的属性值为 center 。这将使得容器中的所有弹性盒子元素都在水平方向上居中对齐。
结论
CSS Flexbox 是一种强大的布局模型，它可以帮助我们更加方便快捷地控制元素的位置和对齐方式。我们可以使用 align-items 属性和 justify-content 属性控制弹性盒子元素在垂直方向和水平方向上的位置和对齐方式。在实际使用中，我们可以灵活地结合两个属性，来产生各种不同的布局效果。
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f182ba6fbf9601973c55ac