css3弹性盒子布局

CSS3弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性：

1. 弹性容器（Flex Container）：使用`display: flex;`或`display: inline-flex;`来定义容器为弹性容器。弹性容器的子元素将根据容器的规则进行布局。

2. 弹性项目（Flex Item）：弹性容器中的子元素被称为弹性项目。可以使用`flex`属性来控制弹性项目在容器中的分布。例如，`flex: 1;`将使项目占据可用空间的比例为1。

3. 主轴（Main Axis）和交叉轴（Cross Axis）：弹性容器具有主轴和交叉轴，它们决定了项目在容器内的布局方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。

4. 弹性盒子属性：
- `flex-direction`：指定主轴的方向（row、row-reverse、column、column-reverse）。
- `justify-content`：控制弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。
- `align-items`：控制弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。
- `align-self`：控制单个弹性项目在交叉轴上的对齐方式。可以覆盖`align-items`的设置。
- `flex-wrap`：指定是否换行（nowrap、wrap、wrap-reverse）。
- `flex-flow`：`flex-direction`和`flex-wrap`的简写形式。
- `align-content`：控制多行弹性项目在交叉轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。

CSS3弹性盒子布局非常灵活，并且可以适应不同屏幕大小和设备。它被广泛应用于响应式网站设计和移动应用程序的开发中。