CSS3 弹性盒子
引言
CSS3 弹性盒子（Flexbox）是一种用于布局的CSS3模块，它提供了一种更加高效、灵活的方式来布局、对齐和分配容器中项目的空间，即使它们的大小是未知或动态的。弹性盒子模型为现代网页设计带来了极大的便利，使得开发者可以更加轻松地创建复杂的布局。
弹性盒子概述
定义
弹性盒子是一种布局容器，它允许容器内的元素能够灵活地伸缩以适应可用空间。它通过设置容器的display属性为flex或inline-flex来启用。
特点
- 空间分配：弹性盒子能够自动分配空间，使得容器内的元素能够根据需要伸缩。
- 对齐方式：弹性盒子提供了多种对齐方式，包括水平、垂直、基线对齐等。
- 顺序调整：弹性盒子允许开发者通过
order属性改变子元素的顺序，即使它们在HTML中的顺序不同。 - 响应式设计：弹性盒子能够很好地适应不同屏幕尺寸和设备。
弹性盒子基本语法
容器属性
display: flex;或display: inline-flex;：启用弹性盒子模型。flex-direction: row | row-reverse | column | column-reverse;：设置弹性盒子的方向。flex-wrap: nowrap | wrap | wrap-reverse;：设置弹性盒子子元素是否换行。justify-content: flex-start | flex-end | center | space-between | space-around;<
