bootstrap专栏 02.栅格与弹性布局 03.flex弹性布局

本文链接：https://blog.youkuaiyun.com/m0_66351881/article/details/123535010

本文详细介绍了Flex弹性布局中的行内布局和列内布局。通过实例展示了justify-content属性用于设置行内内容对齐方式，包括start、center、end、around和between选项。此外，还讲解了行内移动、行内外边距调整、行内填充以及行内竖直对齐等概念。对于列内布局，介绍了顶部和底部对齐以及内容反转的方法。这些布局技巧有助于实现更灵活和响应式的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# 03.flex弹性布局

[toc]{type: "ol", level: [3,4]}

### 概念
> 用于模块内布局

### 行内布局
#### 基础布局
- justify-content
> 行内的内容，设置对齐方式
- **start**{style="color:brown"} &nbsp; 左对齐
- **center**{style="color:goldenrod"} &nbsp; 居中对齐
- **end**{style="color:green"} &nbsp; 右对齐
- **around**{style="color:red"} &nbsp; 间隔相等
- **between**{style="color:gold"}  &nbsp; 两端对齐
> padding宽度：边框与内部文字的距离
```html
<div class="d-flex flex-row border border-dark justify-content-start">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success w-25">two</div>
    <div class="p-2 border border-success w-50">three</div>
</div>
```
![flex弹性布局-行内布局-基础布局](03.flex弹性布局-行内布局-基础布局.png)

#### 行内移动
- offset-n **(1~11)**{style="color:grey"}
- 移动一定的距离
```html
<div class="d-flex flex-row border border-dark " >
    <div class="p-2 border border-success offset-1">one</div>
    <div class="p-2 border border-success offset-2">two</div>
    <div class="p-2 border border-success offset-3">three</div>
</div>
```
![flex弹性布局-行内布局-行内移动](03.flex弹性布局-行内布局-行内移动.png)

#### 行内外边距
- m-auto
> 自动处理外边距
> 默认无外边距
> **ml-auto**{style="color:goldenrod"} **mr-auto**{style="color:goldenrod"} &nbsp; **mt-auto**{style="color:green"} **mb-auto**{style="color:green"}
- m-n **(1~5)**{style="color:grey"}
> 手动微调外边距
```html
<div class="d-flex flex-row border border-dark " >
    <div class="p-2 border border-success m-auto">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>
```
![flex弹性布局-行内布局-行内外边距](03.flex弹性布局-行内布局-行内外边距.png)

#### 行内填充
- flex-fill
> 填满父标签
```html
<div class="d-flex flex-row border border-dark">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success flex-fill">three</div>
</div>
```
![flex弹性布局-行内布局-行内填充](03.flex弹性布局-行内布局-行内填充.png)

#### 行内竖直对齐
> 行内的内容，默认与父标签高度相同
> align-标签会使其恢复自身的高度
> **start**{style="color:brown"} &nbsp; **center**{style="color:goldenrod"} &nbsp; **end**{style="color:green"}
- align-items系列
> 针对全部行内的内容
- align-self系列
> 针对单个行内的内容
```html
<div class="d-flex flex-row border border-dark align-items-center" style="height: 200px">
    <div class="p-2 border border-info align-self-start">one</div>
    <div class="p-2 border border-info w-25">two</div>
    <div class="p-2 border border-info w-50 align-self-end">three</div>
</div>
```
![flex弹性布局-行内布局-行内竖直对齐-对齐前](03.flex弹性布局-行内布局-行内竖直对齐-对齐前.png)
![flex弹性布局-行内布局-行内竖直对齐-对齐后](03.flex弹性布局-行内布局-行内竖直对齐-对齐后.png)


### 列内布局
#### 基础布局
- justify-content-start
> 列内的内容，顶部对齐
- justify-content-end
> 列内的内容，底部对齐
- reverse
> 将内部的内容反转排序
```html
<div class="d-flex flex-column-reverse border border-dark justify-content-end" style="height: 300px">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success h-25">two</div>
    <div class="p-2 border border-success h-50">three</div>
</div>
```
![flex弹性布局-列内布局-基础布局](03.flex弹性布局-列内布局-基础布局.png)

#### 其他布局
> 与行内布局原理相同