Flexbox是CSS3的一种新布局模式，可以让我们轻松地创建出各种复杂的布局。在过去，我们可能需要使用多个嵌套容器和一些复杂的CSS来实现类似的效果，但现在，我们可以用更少的代码创建更好的布局。
Flexbox的基础
Flexbox是一种基于弹性布局的设计，它让元素可以按照需求大小来自动排列。它的弹性布局可以让元素在容器内自由排序大小，便于实现响应式设计和自适应布局。
Flexbox布局由两个主要的元素组成：父容器和子元素。父容器被称为Flex容器，而子元素则称为Flex项目。Flexbox布局还包括以下几个主要的组成部分：
Flex容器的属性
- display
- flex-direction
- justify-content
- align-items
- flex-wrap
Flex项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
接下来，我们将逐一介绍这些属性。
Flex容器的属性
1. display
这个属性设置了Flex容器的显示类型。它的值为flex或inline-flex，分别表示块级和行内级可以被伸缩的容器。
.container {
display: flex;
}2. flex-direction
这个属性设置了Flex项目在容器中的排列方向。它的值可以是row（水平方向从左到右）、column（垂直方向从上到下）、row-reverse（水平方向从右到左）、column-reverse（垂直方向从下到上）。
.container {
flex-direction: row;
}3. justify-content
这个属性设置了Flex项目在容器中的水平对齐方式。它的值可以是flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐且项目之间平均分布）、space-around（项目之间平均分布，且两端也有间隔）。
.container {
justify-content: center;
}4. align-items
这个属性设置了Flex项目在容器中的垂直对齐方式。它的值可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（默认，元素沿容器垂直方向拉伸）。
.container {
align-items: center;
}5. flex-wrap
这个属性设置了Flex项目是否换行。它的值可以是nowrap（默认，不换行）、wrap（自动换行）、wrap-reverse（自动换行，但是倒序排列）。
.container {
flex-wrap: wrap;
}Flex项目的属性
1. order
这个属性设置了Flex项目在容器中的排列顺序。它的值可以是一个整数，默认值为0，数值越小排列越靠前。
.item {
order: 1;
}2. flex-grow
这个属性设置了Flex项目在容器中可以增长的比例。它的值为一个非负数，表示项目在剩余空间中占据的比例，所有项目的系数之和大于0，如果有多个元素，则按照系数的比例分配剩余的空间。
.item {
flex-grow: 1;
}3. flex-shrink
这个属性设置了Flex项目在容器中缩小的比例。它的值为一个非负数，默认为1，表示如果容器不够放置所有项目时，缩小的比例，所有项目的系数之和大于0。
.item {
flex-shrink: 1;
}4. flex-basis
这个属性定义了Flex项目在主轴方向上的基准值。它的值可以是长度、百分比或auto。它的默认值为auto，根据元素的大小自动调整。
.item {
flex-basis: 100px;
}示例代码
下面是一个典型的Flex容器，它包含三个Flex项目。我们来看看如何使用Flexbox的一些属性来创建一个响应式的网格布局。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- - ----- - ----------- ------ ---------- -- ------------ -- ------- ----- ----------- ------- -
上面的代码会创建一个网格布局，每行有三个Flex项目。当浏览器窗口较小时，Flex项目会自动缩小以适应容器的大小。
总结
Flexbox是一种非常强大的CSS布局技术，它让我们可以轻松地实现复杂的布局。虽然它还比较新，但可以在现代浏览器中得到良好的支持。同时，我们需要逐渐深入了解它的属性和用法，才能更好地应用在实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fab30ff6b2d6eab3188c34