弹性布局（Flexbox）是一种现代化的 CSS 布局方法，它可以让您更方便地创建响应式和动态布局。在本篇文档中，我们将介绍弹性布局的基本概念以及如何在项目中使用它。
一、基本概念
容器（Container）：弹性布局由一个容器组成，这个容器负责对其子元素进行排列和对齐。要创建弹性容器，请在 CSS 中将 display 属性设置为 flex 或 inline-flex。
.container { display: flex; }
项目（Item）：容器中的子元素被称为项目。项目可以是任何 HTML 元素，例如文本、图片或其他标签。
二、弹性布局属性
1. 容器的属性
flex-direction：设置项目在容器中排列的方向。可选值：row（默认），row-reverse，column，column-reverse。
.container { flex-direction: row; } flex-wrap：设置项目是否换行。可选值：nowrap（默认），wrap，wrap-reverse。 .container { flex-wrap: wrap; } flex-flow：flex-direction 和 flex-wrap 的简写属性。 .container { flex-flow: row wrap; } justify-content：设置项目在主轴上对齐的方式。可选值：flex-start（默认），flex-end，center，space-between，space-around。 .container { justify-content: center; } align-items：设置项目在交叉轴上对齐的方式。可选值：flex-start，flex-end，center，baseline（默认），stretch。 .container { align-items: center; } align-content：设置多行项目在交叉轴上对齐的方式。可选值：flex-start，flex-end，center，space-between，space-around，stretch（默认）。 .container { align-content: center; }
2. 项目的属性
order：设置项目的排列顺序。数值越小，排列越靠前，默认为 0。
.item { order: 1; } flex-grow：设置项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。 .item { flex-grow: 1; } flex-shrink：设置项目的缩小比例。默认为 1，即如果空间不足，该项目将缩小。 .item { flex-shrink: 0; } flex-basis：设置项目在主轴方向上的初始大小。可以是长度值（如 200px）或百分比（如 50%），默认值为 auto。 .item { flex-basis: 200px; } flex：flex-grow，flex-shrink 和 flex-basis 的简写属性。 .item { flex: 1 1 200px; } align-self：允许单个项目覆盖容器的 align-items 属性。 .item { align-self: flex-start; }
