Flex布局（下）：侧轴对齐方式的奥秘

前端

2024-01-08 03:02:20

在Flex布局的上篇探讨中，我们深入剖析了主轴对齐方式的妙用。今天，我们将目光转向侧轴对齐方式，揭开它在灵活布局中的另一重魅力。

侧轴对齐方式

侧轴对齐方式，顾名思义，就是控制子元素在侧轴（垂直方向）上的排列。它有两种主要属性：

align-items： 应用于弹性容器，影响所有子元素在侧轴上的对齐方式。
align-self： 应用于子元素，用于覆盖或修改align-items属性设置的默认对齐方式。

align-items

align-items属性提供了五种对齐选项：

flex-start： 子元素在侧轴顶部对齐。
flex-end： 子元素在侧轴底部对齐。
center： 子元素在侧轴中心对齐。
baseline： 子元素的基线（即字母底部）在侧轴对齐。
stretch： 子元素在侧轴方向拉伸，占据整个容器高度。

align-self

align-self属性允许子元素覆盖align-items属性设置的默认对齐方式。它提供了与align-items属性相同的五个对齐选项。

示例：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item1 {
  align-self: flex-start;
}

.item2 {
  align-self: flex-end;
}

在这个示例中，align-items: center将所有子元素在侧轴上居中对齐。然而，item1的align-self: flex-start属性会覆盖此默认设置，将其在侧轴顶部对齐。item2的align-self: flex-end属性也会覆盖默认设置，将其在侧轴底部对齐。

提示：

谨慎使用align-self属性，因为它可能会破坏align-items属性设置的统一对齐。
使用baseline对齐时，确保子元素具有相似的基线。

案例：垂直居中的导航栏

考虑一个垂直居中的导航栏示例：

<nav>
  <ul>
    <li>首页</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
</nav>

nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}