弹性盒子布局 display : flex

弹性盒子布局（Flexbox Layout）是CSS3引入的一种新的布局模式，用于在单个维度（行或列）中高效地布局、对齐和分配容器中的空间，即使子元素的尺寸未知或动态改变。以下是对Flexbox Layout的清晰介绍，包括其主要特点和用法：

1. 基本概念

• 伸缩容器（Flex Container）：需要应用Flexbox布局的父级元素。通过在其上设置display属性为flex或inline-flex，可以将其定义为伸缩容器。
• 伸缩项（Flex Items）：伸缩容器中的子元素称为伸缩项，它们会根据Flexbox的布局规则进行排列和大小调整。

2. 主轴和侧轴

• 主轴（Main Axis）：伸缩项排列的主要方向。主轴的方向由flex-direction属性决定，可以是水平（默认，即row）或垂直（column）。
• 侧轴（Cross Axis）：垂直于主轴的轴。侧轴的方向总是与主轴垂直。

3. 主要属性

Flexbox布局涉及到多个属性，这些属性主要应用在伸缩容器和伸缩项上。

伸缩容器属性

• 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：控制伸缩项在侧轴上的对齐方式，与justify-content类似，但作用于侧轴。
• align-content：当伸缩项在伸缩容器中多行存在时，控制行之间的对齐方式。

伸缩项属性

• flex-grow：定义伸缩项的放大比例，默认为0，即如果有剩余空间也不放大。
• flex-shrink：定义伸缩项的缩小比例，默认为1，即如果空间不足将会缩小。
• flex-basis：定义伸缩项在主轴方向上的基础尺寸，默认值为auto。
• flex：是flex-grow、flex-shrink和flex-basis的简写属性，用于快速设置伸缩项的伸缩特性。
• align-self：允许伸缩项单独设置侧轴上的对齐方式，覆盖伸缩容器的align-items属性。

4. 优点

• 灵活性：Flexbox允许你轻松设计复杂的布局结构，即使在不同屏幕尺寸和分辨率下也能保持一致性。
• 方向性：不同于传统的块级和行内元素，Flexbox可以很容易地改变布局的方向（行或列）。
• 空间分配：Flexbox可以轻松地在容器内分配多余的空间或处理容器内空间不足的情况。

5. 示例

一个基本的Flexbox布局示例如下：

<div class="flex-container">  
  <div class="flex-item">1</div>  
  <div class="flex-item">2</div>  
  <div class="flex-item">3</div>  
</div>  
  
<style>  
.flex-container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
.flex-item {  
  flex: 1;  
  padding: 10px;  
  border: 1px solid black;  
  text-align: center;  
}  
</style>

在这个示例中，.flex-container是一个伸缩容器，它的子元素.flex-item是伸缩项。通过设置justify-content: space-between;，伸缩项在主轴（这里是水平方向）上均匀分布。通过设置align-items: center;，伸缩项在侧轴（这里是垂直方向）上居中对齐。而flex: 1;则使得所有伸缩项在主轴方向上等比例分配空间。