Flex 布局

最新推荐文章于 2025-05-15 18:02:03 发布

我要出去玩儿

最新推荐文章于 2025-05-15 18:02:03 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 flex布局文章标签： flex css css3 html5

本文链接：https://blog.youkuaiyun.com/mwl_learning/article/details/115443138

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

flex布局

1 篇文章

订阅专栏

01 Flex 布局简介

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 Flex 布局.
设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效.

采用 Flex 布局的元素，称为 Flex 容器(flex container)，简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目(flex item)，简称项目。
项目只能是容器的顶层子元素，不包含项目的子元素。

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴的开始位置（与边框的交叉点）叫做 main start, 结束位置叫做 main end.
交叉轴的开始位置叫做 cross start, 结束位置叫做 cross end.

项目默认沿主轴排列.

单个项目占据的主轴空间叫做 main size, 占据的交叉轴空间叫做 cross size

示意图如下：
flex布局示意图

02 父元素/容器属性

2.1 flex-direction

该属性决定主轴的方向（即项目的排列方向）

属性值	说明
row	[default]主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
clumn-reverse	主轴为垂直方向，起点在下沿

2.2 flex-wrap

该属性定义，如果一条轴线排不下，如何换行

属性值	说明
nowrap	[default]不换行
wrap	换行
wrap-reverse	换行，第一行在下方

2.3 flex-flow

该属性使 flex-direction 和 flex-wrap 属性的简写形式，默认是 row wrap

2.4 justify-content

该属性定义了项目在主轴上的对齐方式

属性值	说明
flex-start	[default]左对齐
flex-end	右对齐
center	居中
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-between	均匀排列每个元素,首个元素放置于起点末尾元素放置于终点（3个项目会有2个间隔）
space-evenly	均匀排列每个元素,每个元素之间的间隔相等（3个项目会有4个间隙）

2.5 align-items

该属性定义项目在交叉轴上如何对齐

属性值	说明
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch	如果项目未设置高度或设为auto，将占满整个容器的高度

2.6 align-content

该属性定义了多根轴线的对齐方式
设置该属性的时候必须保证主轴有足够的项目且可以换行
如果项目只有一根轴线，该属性不起作用

属性值	说明
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等; 所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch	[default]轴线占满整个交叉轴(子元素侧轴方向评分父元素的侧轴大小)

03 子元素/项目属性

3.1 order

该属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

3.2 flex-grow

该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果容器的宽度为1000px, 而两个项目 A, B 的宽度都是200px, 那么剩余的空白区域宽度是600px;

A 的 flex-grow 属性值为1, B 的 flex-grow 属性值为 0
A 将占有所有的剩余宽度宽度变成 200px + 600px；
A 的 flex-grow 属性值为1, B 的 flex-grow 属性值为2,
A 将占有所有剩余宽度宽度的1/3变成 200px + 600px / 3 * 1
B 将占有所有剩余宽度宽度的2/3变成 200px + 600px / 3 * 2

3.3 flex-shrink

该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小（默认项目该属性为1）。
如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.4 flex-basis

该属性定义了在分配多余空间之前，项目占据的主轴空间，它的默认值为auto，即项目的本来大小。
如果同时设置 flex-basis 属性和 width 属性，则会以 flex-basis 属性值为准。

3.5 flex

该属性是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为0 1 auto。后两个属性可选。

3.6 align-self

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于stretch 。
该属性可能取6个值，除了auto，其他都与 align-items 属性完全一致。

04 布局示例

<style>
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
h3 {
    color: red;
    font-size: 25px;
    text-align: center;
}
.center-text {
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    line-height: 200px;
}
</style>

01 父元素/容器属性 flex-direction 主轴方向

<div>
    <style>
        .flex-direction-exmaple {
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-direction-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-direction-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

02 父元素/容器属性 flex-wrap 是否换行

<div>
    <style>
        .flex-wrap-exmaple {
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }   
        .flex-wrap-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-wrap-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

03 父元素/容器属性 flex-flow 主轴方向和换行的简写形式

<div>
    <style>
        .flex-flow-exmaple {
            display: flex;
            flex-flow: row-reverse nowrap;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }  
        .flex-flow-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="flex-flow-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

04 父元素/容器属性 justify-content 项目在主轴上的对齐方式

<div>
    <style>
        .justify-content-exmaple {
            display: flex;
            justify-content: space-evenly;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }  
        .justify-content-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="justify-content-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

05 父元素/容器属性 align-items 单行项目在交叉轴上如何对齐

<div>
    <style>
        .align-items-exmaple {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .align-items-exmaple div:nth-child(2n) {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .align-items-exmaple div:nth-child(2n + 1) {
            margin: 20px;
            width: 200px;
            height: 400px;
            background-color: purple;
        }
        .align-items-exmaple div:nth-child(3n) {
            line-height: 75px;
        }
    </style>
    <div class="align-items-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

06 父元素/容器属性 align-content 多行项目在交叉轴上如何对齐

<div>
    <style>
        .align-content-exmaple {
            display: flex;
            flex-wrap: wrap;
            align-content: stretch;;
            margin: 0 auto;
            width: 1000px;
            height: 600px;
            background-color: orange;
        }  
        .align-content-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    <div class="align-content-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

07 子元素/项目属性 order 项目的排列顺序

<div>
    <style>
        .order-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .order-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .order-exmaple div:nth-child(3) {
            order: -1;
        }
    </style>
    <div class="order-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

08 子元素/项目属性 flex-grow 项目的放大比例

<div>
    <style>
        .flex-grow-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-grow-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-grow-exmaple div:nth-child(2) {
            flex-grow: 1;
        }
    </style>
    <div class="flex-grow-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

09 子元素/项目属性 flex-shrink 项目的缩小比例

<div>
    <style>
        .flex-shrink-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        } 
        .flex-shrink-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-shrink-exmaple div:nth-child(2) {
            flex-shrink: 0;
        }
    </style>
    <div class="flex-shrink-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>

在这里插入图片描述

10 子元素/项目属性 flex-basis 项目占据的主轴空间

<div>
    <style>
        .flex-basis-exmaple {
            display: flex;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .flex-basis-exmaple div {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .flex-basis-exmaple div:nth-child(2) {
            /* 如果同时设置 flex-basis 属性和 width 属性，则会以 flex-basis 属性值为准 */
            flex-basis: 400px;
        }
    </style>
    <div class="flex-basis-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
    </div>
</div>

在这里插入图片描述

11 子元素/项目属性 align-self 单行项目在交叉轴上如何对齐

<div>
    <style>
        .align-self-exmaple {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 1000px;
            background-color: orange;
        }
        .align-self-exmaple div:nth-child(2n) {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .align-self-exmaple div:nth-child(2n + 1) {
            margin: 20px;
            width: 200px;
            height: 400px;
            background-color: purple;
        }
        .align-self-exmaple div:nth-child(4) {
            align-self: flex-end;
        }
    </style>
    <div class="align-self-exmaple">
        <div class="center-text">1</div>
        <div class="center-text">2</div>
        <div class="center-text">3</div>
        <div class="center-text">4</div>
        <div class="center-text">5</div>
        <div class="center-text">6</div>
    </div>
</div>