Flex 布局应用场景实例

[TOC]

## 1. 元素对齐

### 1.1. 图标与文字水平居中对齐

**代码展示：**

```CSS
.horizontal div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 5px 0px;
}

.horizontal img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.horizontal span {
    width: calc(100% - 60px);
    font-size: 14px;
}

.vertical {
    display: flex;
    justify-content: space-around;
}
```

```HTML
<div class="horizontal">
    <div>
        <img src="../../Image/rent.png">
        <span>2024年3月4日至11日，全国两会在北京召开。近3000名全国人大代表和2000多名全国政协委员齐聚北京，共赴这场春天的盛会。</span>
    </div>
    <div><img src="../../Image/sale.png">
        <span>今年全国两会期间，习近平总书记活动紧凑、日程满满，同代表委员倾心交流、共商国是。交流中，民生家常直抵百姓关切；言谈间，真情话语令人倍感温暖。</span>
    </div>
</div>
```

**效果展示：**

![](/UploadFlie/MarkdownImg/20250312/202503120402018318.png)

### 1.2. 图标与文字垂直居中对齐

**代码展示：**

```CSS
.vertical {
    display: flex;
    justify-content: space-around;
}
.vertical div {
    width: 100px;
    border: 1px solid #ccc;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.vertical img {
    width: 45px;
    height: 45px;
}
.vertical span {
    font-size: 14px;
}
```

```HTML
<div class="vertical">
    <div>
        <img src="../../Image/rent.png">
        <span>租赁</span>
    </div>
    <div>
        <img src="../../Image/sale.png">
        <span>买卖</span>
    </div>
    <div>
        <img src="../../Image/rank.png">
        <span>报表</span>
    </div>
    <div>
        <img src="../../Image/reward.png">
        <span>荣誉</span>
    </div>
</div>
```

**效果展示：**

![](/UploadFlie/MarkdownImg/20250312/202503120447556924.png)

### 1.3. 骰子布局案例

**公共样式**

```CSS
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  flex-wrap: wrap;
  align-content: center;
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(top, #222, #333);
}

[class$="face"] {
  margin: 16px;
  padding: 4px;
  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;
  box-shadow:
    inset 0 5px white,
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;
  border-radius: 10%;
}

.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
```

**效果图**

![](/UploadFlie/MarkdownImg/20251201/202512010525341498.png)

#### 1.3.1. 骰子一点

```HTML
<style>
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<div class="first-face">
  <span class="pip"></span>
</div>
```

#### 1.3.2. 骰子两点

```HTML
<style>
.second-face {
  display: flex;
  justify-content: space-between;
}
.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}
</style>
<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>
```

#### 1.3.3. 骰子三点

```HTML
<style>
.third-face {
  display: flex;
  justify-content: space-between;
}

.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}
</style>
<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>
```

#### 1.3.4. 骰子四点

```HTML
<style>
.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
```

#### 1.3.5. 骰子五点

```HTML
<style>
.fifth-face {
  display: flex;
  justify-content: space-between;
}
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}
</style>
<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
```

#### 1.3.6. 骰子六点

```HTML
<style>
.sixth-face {
  display: flex;
  justify-content: space-between;
}

.sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<div class="sixth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
```

## 参考
> [阮一峰的网络日志 Flex 布局教程：实例篇](https://www.ruanyifeng.com/blog/2015/07/flex-examples.html)