弹性盒模型（Flexbox）

弹性盒模型（Flexbox）是一种用于布局和排列元素的CSS模块。它提供了一种灵活的方式来创建响应式的、可伸缩的布局，适应不同尺寸的屏幕和设备。

弹性盒模型通过定义容器（父元素）和其内部的弹性项目（子元素）之间的关系来工作。容器可以设置为弹性布局模式，使其内部的项目能够根据规则自动调整其大小、顺序和对齐方式。

以下是弹性盒模型的一些关键概念和属性：

容器属性：
- display：指定容器为弹性盒模型，通过将其设置为flex或inline-flex来启用弹性布局。
- flex-direction：指定项目在容器中的排列方向，可以是水平（横向）或垂直（纵向）。
- justify-content：定义项目在主轴上的对齐方式，例如居中、起始对齐、末尾对齐等。
- align-items：定义项目在交叉轴上的对齐方式，例如居中、起始对齐、末尾对齐等。
- flex-wrap：指定是否允许项目换行排列。
项目属性：
- flex：指定项目的伸缩能力，可以通过设置flex-grow、flex-shrink和flex-basis的值来控制项目的大小调整。
- order：定义项目的排列顺序，数值越小越靠前。
- align-self：定义单个项目在交叉轴上的对齐方式，可以覆盖容器的align-items属性。

当使用弹性盒模型时，可以通过设置容器和项目的属性来创建各种布局。以下是几个示例：

水平居中的导航菜单：

<style>.container {display: flex;justify-content: center;}.menu-item {margin: 0 10px;}
</style><div class="container"><div class="menu-item">Home</div><div class="menu-item">About</div><div class="menu-item">Contact</div>
</div>

在上述示例中，display: flex;将容器设置为弹性盒模型，justify-content: center;使菜单项在主轴上水平居中对齐。

等高列布局：

<style>.container {display: flex;}.column {flex: 1;border: 1px solid black;padding: 10px;}
</style><div class="container"><div class="column">Column 1</div><div class="column">Column 2</div><div class="column">Column 3</div>
</div>

在上述示例中，flex: 1;使每个列具有相同的伸缩能力，从而实现等高列布局。

Column 1

Column 2

Column 3

垂直居中的项目：

<style>.container {display: flex;align-items: center;height: 200px;}.item {margin: 0 10px;}
</style><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>