CSS Flexbox 是一种可以轻松排列和对齐 HTML 元素的方法。它为前端开发人员提供了一种快速、简单的方式，来设计具有吸引力、可读性和可访问性的页面。
什么是 Flexbox
Flexbox 是一种 CSS 布局模型，它允许我们使用一系列的 flex 容器和 flex 项目，来创建灵活的布局。它提供了比传统布局模型更加有效的方式，来控制和对齐 HTML 元素。Flexbox 可以沿着主轴和交叉轴定位和对齐元素，从而使开发人员能够轻松地创建各种布局。
如何使用 Flexbox 对齐元素
下面是一些基本的 Flexbox 对齐元素的方式：
沿主轴方向对齐
我们可以使用 justify-content 属性来指定主轴方向上的元素对齐方式。可以使用以下值：
- flex-start：默认值，所有项目都向主轴的起始位置对齐。
- flex-end：所有项目都向主轴的结束位置对齐。
- center：所有项目都居中对齐。
- space-between：项目之间平均分配空间，但首尾两个项目与容器的边距相等。
- space-around：每个项目两侧的空白区域相等。所以，项目之间的距离比项目与边框的距离大一倍。
.flex-container {
display: flex;
justify-content: center; /* 居中对齐 */
}沿交叉轴方向对齐
我们可以使用 align-items 属性来指定交叉轴方向上的元素对齐方式。可以使用以下值：
- flex-start：所有项目在交叉轴起点处对齐。
- flex-end：所有项目在交叉轴终点处对齐。
- center：所有项目在交叉轴居中对齐。
- baseline：所有项目在交叉轴以基线对齐。
- stretch：默认值，如果项目没有设置高度或设为 auto，将占满整个容器的高度。
.flex-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
}多行对齐
我们可以使用 align-content 属性来使多行元素在交叉轴方向上对齐。可以使用以下值：
- flex-start：所有行向交叉轴起点对齐。
- flex-end：所有行向交叉轴终点对齐。
- center：所有行沿交叉轴居中对齐。
- space-between：各行平均分布在交叉轴上，但是首尾两行与边框的距离为一个项目的距离。
- space-around：每行两边的间隔相等。所以，行与行之间的距离是行与边框的距离的两倍。
.flex-container {
display: flex;
align-content: center; /* 中间对齐，放置在容器中间 */
flex-wrap: wrap; /* 使用多行对齐，当项目超过容器宽度时换行 */
}示例代码
下面是一个基本的 Flexbox 代码示例，可以使用它来了解如何创建 Flexbox 布局：
<div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ -- ------ -- ----------------- ----- - ---------- - ----------------- ----- ------ ----- -------- ----- ------- ----- -
结论
CSS Flexbox 提供了一种简单、灵活的方式，来对齐 HTML 元素并创建复杂的布局。通过使用 Flexbox，开发人员可以轻松地在网站和 web 应用程序中创建各种布局，从而提高用户体验和访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674976eea1ce00635460dd76