详解CSS3弹性伸缩盒

什么是CSS3弹性伸缩盒

CSS3弹性伸缩盒（CSS3 Flexible Box）是一种布局模式，是CSS3为满足响应式设计而设计的。使用CSS3弹性伸缩盒可以让我们在不同分辨率或设备上，轻松实现灵活美观的页面布局。

弹性伸缩盒的基本概念

容器和项目

在弹性伸缩布局中，有容器和项目（也可以称之为弹性框），这两个概念是非常重要的，需要我们先理解。

容器（Flex Container）是一个弹性伸缩布局的最外层元素，在容器的外层包裹着一个盒子。我们可以设置容器的宽度，高度、以及样式等。

项目（Flex Item）是放在容器内的元素，可以是任何HTML元素，如div、span、p、img等。项目可以通过设置它们的样式属性来控制他们的排列位置、对齐方式和空间分配等。

主轴和交叉轴

弹性伸缩盒也有主轴和交叉轴的概念。主轴是项目的排列方向，可以是从左到右（row）、从右到左（row-reverse）、从上到下（column）、从下到上（column-reverse）。默认是row方向。交叉轴垂直于主轴。

弹性伸缩盒的基本属性

弹性伸缩盒的属性非常多，我们可以用这些属性来控制项目在弹性伸缩盒中的位置、排序和对齐。下面列出了一部分常用的属性：

容器的属性

• display: flex; // 声明一个容器采用弹性伸缩布局
• flex-direction: row | row-reverse | column | column-reverse; // 定义排列方向
• flex-wrap: nowrap | wrap | wrap-reverse; // 定义是否换行
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; // 定义主轴上项目的对齐方式
• align-items: flex-start | flex-end | center | baseline | stretch; // 定义交叉轴上项目的对齐方式
• align-content: flex-start | flex-end | center | space-between | space-around | stretch; // 定义多行项目在交叉轴上的对齐方式

项目的属性

• flex-grow: ; // 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
• flex-shrink: ; // 定义项目的缩小比例，默认为1，即如果空间不足，项目将缩小
• flex-basis: | auto; // 定义在分配多余空间前，项目占据的主轴空间，默认值为auto，即项目的本来大小
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] // 是flex-grow、flex-shrink和flex-basis的简写，默认为0 1 auto。后两个属性可选。

示例1：基本的弹性伸缩盒布局

HTML代码：

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

CSS代码：

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

上面的代码将三个项目按从左到右的方式排列，且项目之间的距离将均分主轴上的剩余空间。

示例2：弹性伸缩盒的嵌套

HTML代码：

<div class="flex-container">
  <div class="flex-item">
     <div class="sub-container">
        <div class="sub-item">子项目1</div>
        <div class="sub-item">子项目2</div>
     </div>
  </div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

CSS代码：

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

上面的代码将三个项目按从左到右的方式排列，左边的第一个项目包含了一个嵌套容器，该容器内部使用了水平方向为纵向排列，并且将其内部项目居中对齐。

结论

通过掌握弹性伸缩盒的基本概念和常用属性，我们可以实现更加灵活美观的页面布局，应用场景非常广泛。任何一个具有一定抽象思维能力的web前端工程师都必须熟练掌握该知识点。