前端提高篇CSS进阶8Flex弹性盒子两根轴线

在Flex弹性盒子模型中，存在两根轴线，分别是主轴和交叉轴。主轴是Flex容器的主要轴，它是水平的还是垂直的取决于flex-direction属性。默认情况下，主轴是水平的（row），交叉轴是垂直的（column）。

以下是一个简单的例子，展示如何使用Flex弹性盒子布局：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* 指定为Flex容器 */
  width: 100%;
  height: 100vh;
  background-color: lightblue;
  flex-direction: row; /* 主轴为水平 */
  justify-content: space-around; /* 子元素沿主轴分布 */
  align-items: center; /* 子元素沿交叉轴居中 */
}
 
.flex-item {
  width: 100px;
  height: 100px;
  background-color: tomato;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

在这个例子中，.flex-container 是一个Flex容器，其子元素 .flex-item 会沿着主轴（row）排列。justify-content 属性用于控制子元素如何沿主轴分布，align-items 属性用于控制子元素如何沿交叉轴（这里是垂直方向）居中。