learn/flexbox-tutorial

Flexbox 是 CSS3 中用于布局的一个强大工具，它允许开发者更灵活地设计网页布局。以下是 Flexbox 的基本概念和用法。

Flexbox 基本概念

Flexbox 允许你将容器内的元素排列成一个或多个行（行内元素）或列（列内元素）。每个容器都有一个主轴（main axis）和一个交叉轴（cross axis），用于确定元素的方向。

• 主轴：Flex 容器的子元素将沿着主轴排列。
• 交叉轴：垂直于主轴的轴。

Flexbox 属性

以下是一些常用的 Flexbox 属性：

• display: flex;：将元素设置为 Flex 容器。
• justify-content: space-between;：在主轴上平均分布子元素，并在两端添加额外的空间。
• align-items: center;：在交叉轴上居中对齐子元素。
• flex-direction: row;：定义主轴的方向为水平方向。
• flex-wrap: wrap;：允许子元素换行。

实例

以下是一个使用 Flexbox 的简单示例：

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

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

Flexbox 示例

更多关于 Flexbox 的内容，请访问我们的 Flexbox 教程。

Flexbox 是一个非常有用的布局工具，掌握它可以帮助你创建更加灵活和美观的网页布局。如果你有更多关于 Flexbox 的问题，欢迎在评论区留言讨论。