Flex 布局

最新推荐文章于 2025-05-15 18:02:03 发布
最新推荐文章于 2025-05-15 18:02:03 发布
阅读量425 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 flex布局 文章标签： flex css css3 html5
Copyright © Mr.Dragon 本代码仅供个人学习、参考，不能用作任何商业用途。如果您独具慧眼发现了错误的地方，还望于留言区不吝赐教。
本文链接：https://blog.youkuaiyun.com/mwl_learning/article/details/115443138

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>

在这里插入图片描述

05 源码

需要源码的同学可以在评论区留下邮箱地址，我这边会尽快发过去的。

06 相关文章

grid 布局

flex弹性布局详解
weixin_46809263的博客
09-27 1144
flex-start: 与交叉轴的起点对齐。space-between: 与交叉轴两端对齐，两端不留间隙。space-between: 两端对齐，项目之前间隔相同，两端不留间隙。flex-start: 与交叉轴的起点对齐。
弹性布局flex
Asher_lm的博客
12-06 464
弹性布局flex详解
flex布局下的宽度的问题
m0_53438035的博客
07-30 5247
问题 flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。 解答 我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。 flex-grow属性：定义项目的放大比例 flex-shrink属性：定义项目的缩小比例 解释： 1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。 2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目
前端学习：align-items 和 justify-content 概念和区别
最新发布
佩奇的技术笔记
05-15 771
align-items和justify-content是CSS布局中用于控制元素对齐的重要属性，分别作用于交叉轴和主轴。align-items用于调整元素在交叉轴上的对齐方式，常见值包括stretch、flex-start、flex-end、center和baseline。justify-content则用于控制元素在主轴上的分布，常见值有flex-start、flex-end、center、space-between、space-around和space-evenly。两者的核心区别在于作用方向不同，al
flex布局
kk的博客
01-16 6281
总结一下flex布局
flex 中宽度的设置
zjhgx的专栏
09-17 4622
flex 中button 的长度过长导致宽度的调整不起作用？ 原来以为DataGrid的显示不全是因为控件的长度不对，但后来发现显示器屏幕缩放也很有关系，调整为1280*960后就没有问题了
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
Flex布局让子项保持自身高度的实现
01-19
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。   这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容等宽，并把所有子项的高度变为最高子项的...
微信小程序+Flex布局示例源代码
05-06
在这个"微信小程序+Flex布局示例源代码"中，我们将深入探讨Flex布局在微信小程序中的应用。 Flex布局，全称为Flexible Box布局，是CSS3中的一种新的布局模式，旨在解决传统盒模型在处理复杂或响应式布局时的困难。...
flex宽度总结
weixin_38170862的博客
05-30 1229
flex宽度相关的属性有三个 flex-grow，flex-shrink，flex-basis。下面分别介绍其相关特点： flex-grow 扩大因子，主轴有剩余空间时，元素分配到剩余空间的比率 flex-shrink 收缩因子，主轴剩余空间为负时，元素分配到剩余空间的比率 flex-basis：设置元素初始大小，若未设置，则水平排列默认为元素的宽度，垂直排列默认为元素的高度 当...
flex 宽度计算
Cexo_Ln_Wfn的博客
08-11 1411
最近看到一些关于flex的面试题，发现其中关于宽度计算的问题比较多，网上的解释也有些不太完整，于是自己总结了一下。若对 flex 不是很了解，可以看一下阮一峰老师的教程 Flex 布局教程：语法篇 flex 属性值 一般来说，使用 flex 时都是作为简写方式，类似于 background 属性可以包含 background-image background-repeat 等属性。flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 au
Flex（弹性） 布局
2301_77585245的博客
06-02 175
使用flex 布局实现网页布局，当屏幕小于 700 像素宽时，让两列堆叠而不是并排。响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排。
CSS-flex布局详细讲解：
weixin_45718431的博客
03-26 4766
CSS-flex布局详细及其flex布局携程网移动端案列
flex的宽度属性： * width * explicitWidth * measuredWidth * percentWidth * scaleX
xiemeikj的专栏
09-02 6382
  * width * explicitWidth * measuredWidth * percentWidth * scaleX 收藏 document.body.oncopy = function() { if (window.cli
flex 布局
03-08
这样用户能够逐步理解Flex布局，并解决实际问题。以下是CSS Flexbox布局的教程及常见问题解决方案，按照学习路径分层讲解： ### 一、Flexbox基础概念 Flexbox布局由弹性容器（flex container）和弹性项目（flex ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值