Flexbox 是一个流布局模型，是 CSS3 中的一个新装置，它能够让容器中的子元素能够优雅地分布，实现各种布局。在使用 Flexbox 进行列表布局时，我们往往需要实现两端对齐的效果，本文将介绍如何使用 Flexbox 实现列表两端对齐的方法。
什么是 Flexbox
Flexbox 是 Flexible Box 的缩写，意思是“弹性布局”，它是 CSS3 中的一个新布局模型。使用 Flexbox 可以更加轻松地实现响应式布局，并且可以方便地对子元素进行布局和排序。Flexbox 有以下几个特点：
- 父容器内的子元素能够自动收缩或拉伸，以最佳方式填充可用空间。
- 子元素可以按照需要进行排序，无论它们在文档流中的顺序如何。
- 可以以一种简单而直接的方式，改变其子元素在各个容器的位置和可用空间的大小。
Flexbox 主要用于解决在网页布局中出现的一些问题，例如居中对齐、等高布局、固定底部工具栏等。
要实现列表两端对齐的效果，我们需要借助于 Flexbox 中的 justify-content 属性。这个属性用来控制子元素沿着主轴的对齐方式，常见的几个值如下：
flex-start：子元素安放在容器的开始位置。flex-end：子元素安放在容器的结束位置。center：子元素居中对齐。space-between：子元素之间平均分布在整个容器中。space-around：子元素平均分布在整个容器中，每个子元素周围有相等的间隔。
实现列表两端对齐的方法如下：
.list {
display: flex; /* 将容器设置为 Flexbox 布局 */
justify-content: space-between; /* 使用 justify-content 实现两端对齐 */
}在上面的代码中，我们将列表容器 .list 设置为 Flexbox 布局，然后将 justify-content 属性设置为 space-between，就可以实现两端对齐的效果了。
示例代码
下面是一个完整的例子，它演示了如何使用 Flexbox 实现列表两端对齐的效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- -------------------
-------
----- -
-------- -----
---------------- --------------
----------- -----
-------- --
------- --
----------------- --------
------- --- ----- -----
-
----- -- -
----------------- -----
-------- -----
------- --- ----- -----
------- -----
-
--------
-------
------
--- -------------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-----
-------
-------在浏览器中运行上面的代码，就可以看到一个使用 Flexbox 实现列表两端对齐的例子。
总结
Flexbox 是 CSS3 中的一个强大的布局模型，它能够让我们更加轻松地实现网页布局。在使用 Flexbox 进行列表布局时，掌握两端对齐的方法非常重要，可以让我们实现更加美观的列表布局。本文介绍了使用 justify-content 属性实现列表两端对齐的方法，并提供了一个示例代码，希望对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64758b92968c7c53b029244c