css 弹性盒子模型

CSS弹性盒子模型（Flexbox）是一种用于布局设计的CSS3模块。使用弹性盒子模型可以轻松实现复杂的布局结构，而不需要使用传统的浮动和定位方法。

弹性盒子模型中，通过在容器上设置display:flex或display:inline-flex属性来将一个元素定义为弹性容器，容器内的子元素则成为弹性项。弹性容器内部的元素会根据设置的flex属性值，自动调整宽度和高度，从而实现灵活的布局效果。

弹性盒子模型中一些重要的概念和属性包括：

1. 弹性容器：将一个元素定义为弹性容器，通过设置display:flex或display:inline-flex属性来实现。

2. 弹性项：在弹性容器内部的子元素被称为弹性项，每个弹性项可以拥有自己的flex属性值，从而影响它在容器中的布局位置。

3. flex-direction属性：指定了弹性容器内弹性项的排列方向，默认值为row，即水平方向。

4. justify-content属性：指定了弹性容器内弹性项在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-between和space-around等值。

5. align-items属性：指定了弹性容器内弹性项在侧轴方向上的对齐方式，包括flex-start、flex-end、center、baseline和stretch等值。