详解CSS3 弹性布局快速入门

弹性布局的概念

弹性布局是一种基于盒子模型的格式化布局模式，主要用于解决传统布局中的一些问题，如自适应宽度、水平居中、竖直居中等。

在弹性布局中，容器被分为两个部分：弹性容器(flex container) 和 弹性项目(flex item)。

弹性容器是一个包含了所有弹性项目的容器，类似于传统布局中的元素容器。而弹性项目则是被包含在弹性容器中用于布局的元素。

弹性容器可以通过多种属性来设置弹性布局的方向、对齐方式和元素的排序方式。

弹性容器的设置

在弹性布局中，我们需要使用 display 属性来将元素设置为弹性容器，如下所示：

.container {
  display: flex;
}

此时，容器内的所有元素都会被设置为弹性项目，并默认排列在一行内。

弹性容器属性

下面列举几个弹性容器属性，并说明各个属性的含义和使用方法：

• flex-direction: 决定弹性项目的排列方向。默认值为 row，表示水平方向排列。其他值包括 row-reverse(水平反向排列)、column(垂直方向排列)、column-reverse(垂直反向排列)。

• justify-content: 决定弹性项目在弹性容器中沿主轴方向的对齐方式。主轴方向根据 flex-direction 决定，默认值为 flex-start，表示左对齐。其他可选值包括 flex-end(右对齐)、 center(居中对齐)、space-between(两端对齐，项目之间的间距相等)、space-around(项目之间的间距相等，且项目与边框的间距也相等)。

• align-items: 决定弹性项目在弹性容器中沿副轴方向的对齐方式。副轴方向垂直于主轴，根据 flex-direction 相应变化，默认值为 stretch，表示拉伸对齐。其他可选值包括 flex-start(顶对齐)、 flex-end(底对齐)、center(居中对齐)、baseline(基线对齐)。

示例代码：

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

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  width: 50px;
  height: 50px;
  background: red;
  margin: 10px;
}

弹性项目的设置

在弹性布局中，可以通过弹性项目的属性来控制项目在弹性容器中的定位与尺寸。

弹性项目属性

下面列举几个弹性项目常用属性，并说明各个属性的含义和使用方法：

• flex-basis: 决定项目在弹性容器中的尺寸，默认值为 auto。如果设置了一个具体值，项目的尺寸将会使用该值；否则会使用元素固有的尺寸。

• flex-grow: 决定项目在弹性容器自由空间中所占比例，默认值为 0。如果所有项目的 flex-grow 都为 1，则它们会均分弹性容器的空间。

• flex-shrink: 决定项目在弹性容器空间不足时所占比例，当空间不足时，所有项目的 flex-shrink 比例之和表示项目缩小的比例，默认值为 1。

示例代码：

<div class="container">
  <div class="item" style="flex: 1 1 30px;"></div>
  <div class="item" style="flex: 2 1 30px;"></div>
  <div class="item" style="flex: 3 1 30px;"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  background: lightgray;
}

.item {
  background: red;
}

结语

本文介绍了CSS3弹性布局的基本概念和使用方法，包括弹性容器和弹性项目的设置。通过示例代码，让大家初步掌握如何使用CSS3弹性布局完成网页布局效果。