在前端开发中，常常会遇到需要让一行或一列的元素实现两端对齐布局的情况。CSS Flexbox 布局提供了一种简单而有效的方式来实现这种布局效果。
Flexbox 布局简介
CSS Flexbox 布局（弹性盒布局）是 CSS3 提供的一种新的布局方式，它可以轻松地实现复杂的布局，如垂直居中、等高布局等。Flexbox 布局可以将容器（flex container）的子元素（flex item）按照一定的规则排列在容器内。
Flexbox 布局的主要特点是：
- 父元素（容器）和子元素（项目）之间的布局关系非常灵活，可以实现各种布局效果。
- 父元素可以沿着主轴（main axis）或交叉轴（cross axis）对子元素进行对齐，包括左对齐，居中对齐，右对齐等。
接下来，我们将用 CSS Flexbox 布局实现一种常见的两端对齐布局。
实现两端对齐布局
实现两端对齐布局有多种方式，下面我们将介绍最常用的两种方式。
方式一
首先，我们需要定义一个带有 display: flex 属性的容器，将其内部的元素变成弹性盒子。接下来，我们将 justify-content 属性设置为 space-between，它能够沿着主轴将元素划分成两份，并将两端对齐。
<div class="container"> <div class="item">第一个元素</div> <div class="item">第二个元素</div> <div class="item">第三个元素</div> </div>
.container {
display: flex;
justify-content: space-between;
}justify-content 属性有很多种取值，包括：
flex-start，沿着主轴将元素对齐到容器的起点。flex-end，沿着主轴将元素对齐到容器的终点。center，沿着主轴将元素居中对齐。space-between，沿着主轴将元素均匀分布，两端对齐。
方式二
另一种实现两端对齐布局的方式是使用 justify-content 属性的两个取值，flex-start 和 flex-end。这种方式需要在每个项目上设置 margin，并将其中一个项目的 margin-left 设置为 auto。这样，该项目就会被推到容器的末尾。
<div class="container"> <div class="item">第一个元素</div> <div class="item">第二个元素</div> <div class="item special">第三个元素</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ----------- - ----- - ------------- ----- - -------- - ------------ ----- -
这种方法需要注意的是：
margin-right的值需要与元素之间的间距大小一致。- 只有一个项目可以被推到容器的末尾。
示例代码
下面是一个完整的示例代码，演示如何使用 CSS Flexbox 布局实现两端对齐布局。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------------
-------
---------- -
-------- -----
---------------- --------------
-
----- -
----------------- -----
------ -----
-------- -----
-
--------
-------
------
---- ------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
-------
-------总结
CSS Flexbox 布局是一种非常方便实用的布局方式，可以让我们轻松地实现各种复杂的布局效果。本文介绍了如何利用 CSS Flexbox 布局实现两端对齐布局的两种方法，可以根据实际需求选取其中的一种方式。希望本文可以对你在前端开发中实现布局有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486e5ea48841e9894585603