CSS Flexbox（弹性盒布局）是一种常用于前端开发的布局方式，它可以灵活地实现各种复杂布局和响应式设计。
什么是 Flexbox？
Flexbox 是一种 CSS 布局方式，它采用了基于容器的布局方式，即通过定义容器的方向、对齐方式、元素间的间距等来实现分布排列。与传统的布局方式相比，Flexbox 具有更高的灵活性和响应式设计能力，可以适应各种终端设备上的排版需求。
Flexbox 布局的基本理念
Flexbox 布局采用了容器与内容的概念，容器定义了一个弹性盒子，内容则是放置于这个盒子中的元素。容器通过一系列的 CSS 属性来控制弹性盒子的排列方式、对齐方式、元素间的间距等。
常用的 Flexbox 属性包括：
display:flex：指定元素是一个弹性盒子flex-direction：指定弹性盒子的主轴方向justify-content：指定弹性盒子内的元素沿主轴方向的对齐方式align-items：指定弹性盒子内的元素沿交叉轴方向的对齐方式flex-wrap：指定弹性盒子是否换行align-content：指定多行弹性盒子内元素的对齐方式
实现弹性盒子
首先，引入 CSS 文件：
<link rel="stylesheet" href="flexbox.css">
将一个 div 容器设置为弹性盒子，然后定义弹性盒子内的元素：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ------ ------- ------ ----------------- ---- ------- ----- -
这样便可以实现三个等宽的红色块，它们沿着默认的主轴方向（水平方向）排列，元素之间的距离是 10px。
实现不同的主轴方向
可以使用 flex-direction 属性来改变主轴方向。
.container {
display: flex;
flex-direction: column;
}将主轴方向变成纵向排列，需要调整元素的高度。
.item {
width: 100px;
height: 50px;
background-color: red;
margin: 10px;
}这样便可以实现一个摞起来的三个红色块了。
实现不同的对齐方式
使用 justify-content 和 align-items 属性可以调整元素在主轴和交叉轴上的对齐方式。
.container {
display: flex;
justify-content: center;
align-items: center;
}这个例子将所有的元素沿着主轴和交叉轴都居中对齐。
实现弹性布局的响应式设计
弹性盒子布局可以轻松地实现响应式设计。通过改变主轴方向和元素的宽高，可以适应不同终端上的屏幕尺寸。
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- --------------
------------ -------
-
----- -
------ ----
------- -----
-
------ ----------- ------ -
---------- -
--------------- -------
-
----- -
------ -----
-------------- -----
-
-这个例子将主轴方向改为水平居中和上下两端对齐，元素宽度为 30%。在移动端上，则将主轴方向改为纵向排列，并将元素宽度改为 100%。
总结
CSS Flexbox 是一个强大的布局方式，可以实现复杂的布局和响应式设计。学习 Flexbox 对于前端开发人员来说是一项很有价值的技能。希望本文可以为大家提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455d600968c7c53b093541c