flex之两列与三列布局

作者：System 时间：2024年08月15日分类：所有,css3 字数：629

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

在Flex布局中，可以通过设置容器的flex-direction属性来实现两列或三列布局。以下是两列和三列布局的示例代码：

两列布局（水平分布）：




.container {
  display: flex;
  flex-direction: row;
}
 
.column {
  flex: 1; /* 两列等宽 */
}




<div class="container">
  <div class="column">第一列内容</div>
  <div class="column">第二列内容</div>
</div>

三列布局（水平分布）：




.container {
  display: flex;
  flex-direction: row;
}
 
.column {
  flex: 1; /* 三列等宽 */
}




<div class="container">
  <div class="column">第一列内容</div>
  <div class="column">第二列内容</div>
  <div class="column">第三列内容</div>
</div>

如果需要两列或三列垂直排列，可以将flex-direction设置为column。