CSS3 弹性盒子
介绍
CSS3 弹性盒子（Flexbox）是一种用于布局设计的强大工具。它提供了一种更加高效的方式来对容器内的子元素进行排列、对齐和分配空间。Flexbox 的设计目标是提供一种统一的布局模型，能够适应不同屏幕尺寸和设备类型，同时简化布局流程。
弹性盒子模型
在 Flexbox 中，容器（container）和项目（item）是两个核心概念。容器是包含项目的元素，而项目是容器的直接子元素。通过设置容器的 CSS 属性，可以控制项目的布局行为。
容器属性
display: 设置容器的布局模式，如flex或inline-flex。flex-direction: 定义项目的排列方向，如row、column、row-reverse或column-reverse。flex-wrap: 定义项目是否可以在容器中换行，如nowrap、wrap或wrap-reverse。flex-flow: 是flex-direction和flex-wrap的简写形式。justify-content: 定义项目在主轴上的对齐方式，如flex-start、flex-end、center、space-between或space-around。align-items: 定义项目在交叉轴上的对齐方式，如flex-start、flex-end、center、baseline或stretch。align-content: 定义多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。
项目属性
order: 定义项目的排列顺序，数值越小，排列越靠前。flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis: 定义在分配多余空间之前，项目占据的主轴空间，默认值为auto。flex: 是flex-grow、flex-shrink和flex-basis的简写形式。align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
实例
以下是一个简单的 Flexbox 布局实例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.item {
margin: 10px;
padding: 20px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
在这个例子中，我们创建了一个 Flexbox 容器，并设置了三个项目。容器内的项目将沿着主轴居中对齐，并在交叉轴上居中对齐。每个项目之间有 10px 的外边距，并且有 20px 的内边距。
结论
CSS3 弹性盒子是一种强大的布局工具，它使开发者能够轻松创建复杂且响应式的布局。通过理解 Flexbox 的基本概念和属性，开发者可以更加高效地设计网页布局。