zh/tutorials/css3/flexbox

Flexbox 是一种非常强大的 CSS3 布局技术，它能够让你轻松地设计响应式布局。以下是一些关于 Flexbox 的基本概念和用法。

Flexbox 基础

Flexbox 允许你在一个容器中对其子元素进行灵活布局，而无需使用浮动或定位。

容器属性

• display: flex; 或 display: inline-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;
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子元素属性

• order: <integer>;
• flex-grow: <number> | none;
• flex-shrink: <number> | none;
• flex-basis: <length> | auto;
• align-self: auto | flex-start | flex-end | center | baseline | stretch;

实例：响应式布局

使用 Flexbox，你可以创建一个响应式布局，使元素在不同屏幕尺寸下自动调整大小和位置。

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

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
  margin: 10px;
}

在上面的例子中，.container 是一个 Flex 容器，而 .item 是 Flex 子元素。每个 .item 都会占据 200px 的宽度，并在需要时自动换行。

扩展阅读

想要了解更多关于 Flexbox 的内容，请访问我们的CSS3 Flexbox 教程。

图片展示

Flexbox 示例布局