freeCodeCamp教程：使用flex-direction属性创建垂直布局

谢忻含Norma

于 2025-05-30 09:01:14 发布

阅读量272

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00065/article/details/148323135

freeCodeCamp教程：使用flex-direction属性创建垂直布局

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

理解flex-direction属性

在Flexbox布局中，flex-direction是一个基础但极其重要的属性，它决定了flex容器内子元素的排列方向。这个属性有四个可能的值：

row（默认值）：子元素水平排列（从左到右）
row-reverse：子元素水平排列但方向相反（从右到左）
column：子元素垂直排列（从上到下）
column-reverse：子元素垂直排列但方向相反（从下到上）

为什么需要column布局？

默认情况下，flex容器会将其子元素水平排列（row方向）。但在很多实际场景中，我们需要垂直排列元素：

移动端导航菜单
垂直堆叠的卡片布局
表单输入框的垂直排列
任何需要从上到下排列内容的场景

实践示例解析

让我们分析教程中的示例代码：

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: column;  /* 关键属性 */
  }
  #box-1, #box-2 {
    width: 50%;
    height: 50%;
  }
  #box-1 { background-color: dodgerblue; }
  #box-2 { background-color: orangered; }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这个例子中：

我们有一个高度为500px的flex容器（#box-container）
通过设置flex-direction: column，容器内的两个盒子（#box-1和#box-2）会垂直排列
每个盒子占据容器50%的宽度和50%的高度

常见问题与注意事项

高度设置：使用column布局时，确保容器有明确的高度（如示例中的500px），否则可能看不到预期的垂直排列效果。
宽度行为：在column布局中，子元素的宽度属性仍然有效，但高度属性现在控制的是它们在垂直方向上的尺寸。
对齐方式：垂直布局后，justify-content和align-items的含义会互换：
- justify-content控制垂直方向的对齐
- align-items控制水平方向的对齐
响应式考虑：在实际项目中，可能需要根据屏幕尺寸切换排列方向，这时可以结合媒体查询使用：

#box-container {
  flex-direction: row;  /* 默认水平排列 */
}

@media (max-width: 768px) {
  #box-container {
    flex-direction: column;  /* 小屏幕垂直排列 */
  }
}