Flexbox 教程

Flexbox 是 CSS3 中的一种布局方式，它允许开发者更灵活地设计网页布局。本文将为您介绍 Flexbox 的基本概念和常用属性。

Flexbox 基本概念

Flexbox 是一种一维布局模型，它允许容器内的项目沿着一个轴线进行排列。Flexbox 的容器称为 flex-container，容器内的项目称为 flex-item。

Flexbox 属性

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

• display: flex;：将元素设置为 flex 容器。
• flex-direction: row | row-reverse | column | column-reverse;：设置主轴的方向。
• justify-content: flex-start | flex-end | center | space-between | space-around;：设置主轴上项目的对齐方式。
• align-items: flex-start | flex-end | center | baseline | stretch;：设置交叉轴上项目的对齐方式。
• flex-wrap: nowrap | wrap | wrap-reverse;：设置是否换行。
• flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ];：设置项目的扩展、收缩和基础大小。

示例

以下是一个简单的 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 {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

扩展阅读

如果您想了解更多关于 Flexbox 的内容，可以访问我们的 Flexbox 教程。

<center><img src="https://cloud-image.ullrai.com/q/Flexbox_Example/" alt="Flexbox 示例"/></center>