【CSS】深入浅出弹性布局

CSS的弹性布局（Flexbox）是一种用于在容器中沿着一维方向（水平或垂直）来布局、对齐和分配容器内项目空间的有效方式。它旨在提供一个更加有效的方式来布局、对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。

基本概念

• 容器（Flex Container）：设置display: flex;或display: inline-flex;的元素成为一个弹性容器，其子元素则成为弹性项目（Flex Items）。
• 项目（Flex Items）：弹性容器的直接子元素自动成为弹性项目。
• 主轴（Main Axis）：弹性项目沿着其排列的轴被称为主轴。默认情况下，主轴的方向是水平方向（从左到右），但可以通过flex-direction属性来改变。
• 交叉轴（Cross Axis）：垂直于主轴的轴称为交叉轴。

主要属性

容器属性

• flex-direction：定义主轴的方向（row, row-reverse, column, column-reverse）。
• flex-wrap：定义项目是否应该换行（nowrap, wrap, wrap-reverse）。
• flex-flow：flex-direction和flex-wrap的简写。
• justify-content：定义项目在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）。
• align-items：定义项目在交叉轴上的对齐方式（flex-start, flex-end, center, baseline, stretch）。
• align-content：定义多根轴线的对齐方式，如果项目只有一根轴线，则此属性不起作用（flex-start, flex-end, center, space-between, space-around, stretch）。

项目属性

• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

示例

<div class="flex-container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div>
</div><style>
.flex-container {display: flex;justify-content: space-between;align-items: center;height: 100px;
}.flex-item {flex-grow: 1; /* 所有项目将等分剩余空间 */text-align: center;
}
</style>

在这个例子中，.flex-container 是一个弹性容器，它的子元素 .flex-item 将沿主轴（水平方向）等分剩余空间，并且它们在交叉轴（垂直方向）上居中对齐。