弹性盒子模型

CSS3 弹性盒子模型（Flexbox）是一种用于在页面上布置元素的强大工具。它提供了一种更有效、灵活和响应式的方式来对容器中的项目进行布局、对齐和分配空间。以下是主要的 Flexbox 相关属性及其说明：

容器属性（设置在弹性容器上）

‌display‌

display: flex; 将元素定义为弹性容器，并使其子元素成为弹性项目。
display: inline-flex; 将元素定义为内联弹性容器。

‌flex-direction‌

row：主轴为水平方向，从左到右。
row-reverse：主轴为水平方向，从右到左。
column：主轴为垂直方向，从上到下。
column-reverse：主轴为垂直方向，从下到上。

‌flex-wrap‌

nowrap：单行。
wrap：多行，项目从上到下。
wrap-reverse：多行，项目从下到上。

‌flex-flow‌

是 flex-direction 和 flex-wrap 的简写属性，例如：flex-flow: row wrap;

‌justify-content‌

flex-start：项目在主轴起点对齐。
flex-end：项目在主轴终点对齐。
center：项目在主轴居中对齐。
space-between：项目之间的间隔相等。
space-around：项目两侧的间隔相等。
space-evenly：项目之间和两侧的间隔完全相等。

‌align-items‌

stretch：如果项目未设置高度或设为 auto，将占满整个容器的高度。
flex-start：项目在交叉轴起点对齐。
flex-end：项目在交叉轴终点对齐。
center：项目在交叉轴居中对齐。
baseline：项目的基线对齐。

‌align-content‌

stretch：行占满整个容器的高度（默认）。
flex-start：各行向交叉轴起点对齐。
flex-end：各行向交叉轴终点对齐。
center：各行在交叉轴居中对齐。
space-between：各行之间的间隔平均分布。
space-around：各行之间和两侧的间隔相等。

项目属性（设置在弹性项目上

）

‌order‌

定义项目的排列顺序。默认值为 0，可以为负数，数值越小排在越前面。

‌flex-grow‌

定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

‌flex-shrink‌

定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

‌flex-basis‌

定义了在分配多余空间之前，项目的默认大小。可以设为具体的值（如 20px）或关键字（如 auto）。

‌flex‌

是 flex-grow, flex-shrink 和 flex-basis 的简写，例如：flex: 1 1 auto;

‌align-self‌

允许单个项目有与其他项目不同的对齐方式，可覆盖 align-items 属性。
可选值与 align-items 相同，如 auto, flex-start, flex-end, center, baseline, stretch。

通过合理使用这些属性，你可以非常灵活地控制网页元素的布局和排列，使页面更加美观和响应式。