1、CSS3 伸缩盒模型简介

CSS3 的 Flexbox（伸缩盒）模型是一种布局模式，用于在容器内对齐和分配空间，即使它们的大小未知或动态变化。Flexbox 使得布局能够适应不同屏幕尺寸和设备。

示例代码:

<div class="flex-container"><div>项目1</div><div>项目2</div><div>项目3</div>
</div>

.flex-container {display: flex;
}

2、CSS3 伸缩盒模型容器与项目

伸缩盒模型中，使用 display: flex; 的容器称为“伸缩容器（flex container）”，其子元素自动成为“伸缩项目（flex items）”。

示例代码:
同上。

3、伸缩盒模型主轴方向

伸缩容器内的主轴（main axis）可以是水平或垂直的，由 flex-direction 属性控制。

示例代码:

.flex-container {flex-direction: row; /* 默认水平方向 */
}.flex-container-vertical {flex-direction: column; /* 垂直方向 */
}

4、伸缩盒模型主轴换行方式

伸缩项目可以设置换行显示，由