弹性盒子布局是一种相对较新的网页布局方式，它可以在不使用浮动和定位的情况下，轻松地实现复杂的页面布局。弹性盒子布局模型（Flexible Box Layout Module，简称 Flexbox）是 CSS3 中的一个模块，它的主要作用是使页面元素在不同屏幕尺寸和设备上自适应排列。
弹性盒子的基本概念如下：
1.容器（Container）：包含弹性项目的元素。
2.项目（Item）：容器中的内容元素。
3.轴（Axis）：容器中用于排列项目的方向。有两条轴，分别是水平轴（x 轴）和垂直轴（y 轴）。
4.顺序（Order）：项目在容器中的显示顺序。
5.尺寸（Size）：项目的宽度和高度。
6.位置（Position）：项目在容器中的相对位置。
弹性盒子布局的主要属性如下：
1.display：定义一个元素是弹性盒子容器，取值为flex或inline-flex。
2.flex-direction：定义主轴的方向。取值有row（默认值，水平方向）、row-reverse（水平方向反向）、column（垂直方向）和column-reverse（垂直方向反向）。
3.flex-wrap：定义容器中的项目是否换行。取值有nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（换行且反向）。
4.flex-flow：是flex-direction和flex-wrap的简写形式，如flex-flow: row wrap。
5.justify-content：定义项目在主轴上的对齐方式。取值有flex-start（起点对齐，默认值）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和space-around（每个项目两侧的间隔相等）。
6.align-items：定义项目在交叉轴上的对齐方式。取值有flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（项目的第一行文字基线对齐）和stretch（默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度）。
7.align-content：定义多轴线的对齐方式。取值同align-items，但仅在有多行项目时生效。
8.order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
9.flex-grow：定义项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为 1，将等分剩余空间。如果一个项目的flex-grow属性为 2，其他项目为 1，则前者占据的剩余空间为其他项目的两倍。
10.flex-shrink：定义项目的缩小比例。默认为 1，即如果空间不足，项目将缩小。如果一个项目的flex-shrink属性为 0，其他项目为 1，则空间不足时，前者不缩小。
11.flex-basis：定义项目在基准空间下的基准大小。默认值为auto，即项目本来的大小。
12.min-width、min-height：定义项目的最小尺寸。
13.max-width、max-height：定义项目的最大尺寸。
下面是一个简单的弹性盒子布局示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
.item2 {
flex-grow: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item2"></div>
</div>
</body>
</html>
在这个示例中，我们设置了一个包含 5 个项目的容器。我们将容器设置为弹性盒子，并将其主轴方向设置为水平方向（flex-direction: row）。我们使用justify-content属性将项目沿主轴方向居中（justify-content: space-between），并使用align-items属性将项目沿交叉轴方向居中（align-items: center）。
第一个和第二个项目是固定的宽度（width: 100px），而第三个项目没有设置宽度（width: auto），因此它会根据剩余空间自动调整宽度。第四个项目设置了最小宽度（min-width: 100px），以确保它在空间不足时不会缩小。第五个项目设置了放大比例（flex-grow: 2），使得它在有剩余空间时占据两倍于其他项目的空间。
运行此示例，您将看到一个包含 5 个红色正方形的弹性盒子布局。在不同的屏幕尺寸和设备上，这些正方形会自动调整排列，以填充整个容器。
760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
