【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。

示例

html 复制代码

<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 将沿主轴（水平方向）等分剩余空间，并且它们在交叉轴（垂直方向）上居中对齐。