【CSS】弹性盒子模型

### 1. 把盒子转换为弹性盒子

```css
display: flex;
```

### 2. 盒子模型的属性

#### 2.1 把盒子转换为弹性盒子

```css
display: flex;
```

#### 2.2 是否换行

```css
flex-wrap: wrap;
```

#### 2.3 控制项目在水平方向上的对齐方式

```css
justify-content: space-between;
```

#### 2.4 控制项目在垂直方向上的对齐方式

```css
align-items: center;
```

#### 2.5 在容器有多余的空间的情况之下是否放大

```css
flex-grow: 1;
```

#### 2.6 在容器放不下的情况之下是否缩小

```css
flex-shrink: 0;
```

#### 2.7 控制在容器里面垂直方向上的个性化的对齐方式

```css
align-self: flex-end;
```

### 3. 案例

```css
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

li {
            list-style: none;
        }

.list {
            width: 1200px;
            height: auto;
            background-color: #f01;
            /**让一个盒子在父级盒子里面水平方向居中：*/
            margin: 20px auto;
            /**把盒子转换为弹性盒子*/
            display: flex;
            /**控制项目是否换行*/
            flex-wrap: wrap;
            /**水平方向上的对齐方式*/
            justify-content: space-between;
        }

.list>li {
            width: 280px;
            height: 280px;
            background-color: #00f;
            margin-bottom: 20px;
        }

.list>li.ext {
            height: 0;
        }
    </style>
</head>

</body>

</html>
```

最后修改：2022 年 06 月 10 日