CSS3弹性盒模型（Flexbox）详细介绍

简介

CSS3 弹性盒模型（Flexbox）是 CSS3 中新加入的一种布局模型，它能够让容器内的项目自动排列，也可以控制它们的大小、顺序和对齐方式。使用 Flexbox 可以很方便地进行响应式设计，适应各种不同的屏幕尺寸。

Flexbox 的基本概念

• 容器（Container）：包含了所有的 Flexbox 项目（又称为 Flex Items）的父元素。
• 项目（Item）：Flexbox 容器内部的每一个子元素。

Flexbox 的属性

容器的属性

属性	说明
display	定义容器为 Flexbox 布局（值为 flex 或 inline-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）
align-items	定义项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）
align-content	定义多根轴线的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）

项目的属性

属性	说明
order	定义项目的排列顺序，数字越小排列越靠前
flex-grow	定义项目的放大比例，默认为 0，即不放大。如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间；如果某个项目的 flex-grow 属性为 2，它将得到的空间是另一个项目的两倍。
flex-shrink	定义项目的缩小比例，默认为 1，即空间不足时，所有项目将等比例缩小。如果某个项目的 flex-shrink 属性为 0，则它不会缩小。
flex-basis	定义项目的基准大小。默认为 auto，即项目的本来大小。
flex	是 flex-grow、flex-shrink 和 flex-basis属性的缩写。默认值为 0 1 auto。
align-self	定义单个项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。它覆盖容器级别的 align-items 属性。

示例1

HTML代码

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

CSS代码

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 1px solid #ccc;
}

.item {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #333;
    margin: 10px;
    padding: 20px;
}

示例说明

上述代码实现了一个基本的 Flexbox 布局，将四个子元素水平居中、垂直居中，并等分宽度。具体实现方式是：将容器的 display 属性设置为 flex，子元素的 flex 属性设置为 1，代表等分宽度。

示例2

HTML代码

<div class="container">
   <div class="item item1">1</div>
   <div class="item item2">2</div>
   <div class="item item3">3</div>
   <div class="item item4">4</div>
</div>

CSS代码

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 200px;
    border: 1px solid #ccc;
}

.item {
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #333;
    margin: 10px;
    padding: 20px;
}

.item1 {
    flex-basis: 100px;
}

.item2 {
    flex-basis: 50px;
}

.item3 {
    flex-basis: 75px;
}

示例说明

上述代码在示例一的基础上，增加了每个子元素的 flex-basis 属性。同时，将容器的 justify-content 属性设置为 space-around，子元素之间的距离变得更为均匀。这里将三个子元素的 flex-basis 属性设置为不同的值，可以看到它们的宽度也不一样，但是它们依然保持等分效果，原因是宽度的计算方式是基于容器的可用空间计算得到的。