Community/Tutorials/Flexbox_Layout_Tutorial

Flexbox布局教程是社区教程系列中的一部分，它详细介绍了如何使用Flexbox来创建响应式和灵活的网页布局。Flexbox是CSS3的一部分，它提供了更加强大和灵活的方式来布局、对齐和分配容器内项目的空间，即使它们的大小是未知或动态的。

基础概念

容器（Flex Container）：使用display: flex;或display: inline-flex;声明的元素。
项目（Flex Item）：在容器内的所有直接子元素。
主轴（Main Axis）：容器的主轴线方向，默认为水平方向。
交叉轴（Cross Axis）：与主轴垂直的轴线方向。

常用属性

flex-direction：定义项目的布局方向。
flex-wrap：定义如果一行显示不下，是否换行。
flex-flow：flex-direction属性和flex-wrap属性的简写形式。
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义多根轴线的对齐方式。

实战案例

以下是一个简单的Flexbox布局示例：

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

.flex-container {
  display: flex;
  width: 100%;
}

.flex-item {
  flex: 1; /* 每个项目平均分配空间 */
  background-color: lightblue;
  margin: 10px;
  padding: 20px;
  text-align: center;
}

扩展阅读

想要了解更多关于Flexbox的知识，可以阅读以下文章：

Flexbox示意图