Community/Tutorials/Flexbox_Basics

Flexbox 是 CSS3 中的一种布局模型，它允许开发者以更简单的方式创建复杂的布局。以下是一些 Flexbox 基础知识的介绍。

Flexbox 基础概念

Flexbox 允许容器内的项目（flex items）以更灵活的方式布局。以下是一些基础概念：

• 容器（Flex Container）：使用 display: flex; 或 display: inline-flex; 声明的元素。
• 项目（Flex Items）：容器内的元素。
• 主轴（Main Axis）：容器的主方向，默认为水平方向。
• 交叉轴（Cross Axis）：垂直于主轴的方向。

Flexbox 属性

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

• 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">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-around;
  align-items: center;
}

.flex-item {
  background-color: #f3f3f3;
  padding: 20px;
  margin: 10px;
}

扩展阅读

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

• Flexbox Guide

希望这篇教程能帮助您更好地理解 Flexbox！🌟