关于flex布局的几个难点总结

已于 2022-02-24 14:26:40 修改
阅读量4.9k 收藏 23
点赞数 6
分类专栏： css 文章标签： css html5 html
于 2021-02-23 18:06:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws9029/article/details/113976933
版权

文章目录

1.前言

好久没有写css了，当我回顾flex布局时候，发现有些知识已经遗忘了，所以专程写一篇文章来记录下，这篇文章不会介绍flex的基础用法，只是记录下flex布局中其中比较难理解，比较容易忘记的部分！

2. flex属性各种写法

flex 的缩写： flex-grow、flex-shrink、flex-basis, 它有很多种缩略的写法，平时我们用的比较少（因为很多人不知道），下面来详细了解下,具体各自什么意思后面是详细讲解！

1. 如果用了弹性布局，没写flex属性，flex 的默认值是 0 1 auto

flex:0 1 auto;

2.当 flex 取值为一个数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，

flex:1; /*等价于*/ flex:1 1 0%;

3. 当 flex 取值为一个长度或百分比，该值为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

flex:20px; /*等价于*/ flex:1 1 20px;
flex:20%; /*等价于*/ flex:1 1 20px;

4.当 flex 取值为两个数字，则两值视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

flex:1 1; /*等价于*/ flex:1 1 0%;

5.当 flex 取值为 auto，则值为 1 1 auto

flex:auto; /*等价于*/ flex:1 1 auto;

6. 当 flex 取值为 none，则值为 0 0 auto

flex:none; /*等价于*/ flex:0 0 auto;

7. 当 flex 取值为一个数字和一个长度或百分比，则为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，

flex:1 20px; /*等价于*/ flex:1 1 20px;
flex:1 20%; /*等价于*/ flex:1 1 20%;

结论：

  1. 当flex为none或者默认不写情况下flex-grow为0，其他情况下都有值（默认值1或者其他数字）
  2. 当flex为none时候flex-shrink为0，其他情况下都有值（默认值1或者其他数字）
  3. 当flex为一个数字或者两个数字时候flex-basic为0，其他情况下都有值（默认值auto或其他数字或百分比）
2. 1 flex-basis

这个属性的意思是元素的初始长度

<style>
    .container {
        display: flex;
        width: 600px;
        border: 1px solid #ccc;
    }
    .a1 {
        height: 200px;
        flex: 0 0 30%;
        width: 100px;
        background-color: cyan;
    }

    .a2 {
        height: 200px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        height: 200px;
        background-color: red;
        width: 300px;
    }
</style>
<body>
    <div class="container">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

在这里插入图片描述
上面设置了flex: 0 0 30%; 意思我flex-grow为0, flex-shrink为0，flex-basis为600*30%=180px！

<style>
    .container {
        display: flex;
        width: 600px;
        border: 1px solid #ccc;
    }
    .a1 {
        height: 200px;
        flex: 0 0 auto;
        background-color: cyan;
    }

    .a2 {
        height: 200px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        height: 200px;
        background-color: red;
        width: 300px;
    }
</style>
<body>
    <div class="container">
        <div class="a1">1234</div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

在这里插入图片描述
上面设置了flex: 0 0 auto;并且我没设置width属性， 所以a1的长度就为内容的长度！

<style>
    .container {
        display: flex;
        width: 600px;
        border: 1px solid #ccc;
    }
    .a1 {
        height: 200px;
        flex: 0 0 auto;
        width: 100px;
        background-color: cyan;
    }

    .a2 {
        height: 200px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        height: 200px;
        background-color: red;
        width: 300px;
    }
</style>
<body>
    <div class="container">
        <div class="a1">1234</div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

在这里插入图片描述
上面设置了flex: 0 0 auto;并且我设置width属性100px， 所以a1的长度就为wdith长度100px！

结论：

  1. 当flex-basis有值的时候(auto除外)，他的优先级大于width属性的。
  2. 当它为百分比时候是相对父容器的。
  3. 当它为auto时候，如果有width就是width长度，如果没有width就是元素内容的长度。
2. 2 flex-grow

flex-grow 属性用于设置或检索弹性盒子的扩展比率。如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。

<style>
    .container {
        display: flex;
        width: 800px;
        border: 1px solid #ccc;
    }
    .a1 {
        height: 200px;
        flex:1 auto;
        width: 100px;
        background-color: cyan;
    }

    .a2 {
        flex:1 auto;
        height: 200px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        flex:1 auto;
        height: 200px;
        background-color: red;
        width: 300px;
    }
</style>
<body>
    <div class="container">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

在这里插入图片描述
这里每个子元素都设置了 flex:1 auto; 所有的子元素的总长度 a1(100px)+a2(200px)+a3(300px)=600px,父元素的长度为800，多出了200px,因为每个子元素都设置了flex-grow为1，相当于每个元素都有1/3的扩展比例，那么a1长度就变成100px+1/3*200=166.6px,a2长度就变成200px+1/3*200=266.6px,a3长度就变成300px+1/3*200=266.6px,

有些同学会问 你为什么不设置flex:1？
根据上面的缩写flex:1相当于flex:1 1 0%,由于flex-basis的优先级高于width,所以子元素的宽度都为0px,所有子元素总宽度为0px,父的长度为800，因为每个子元素flex-grow为1，所以每个子元素的长度为1/3*800=266.6px,所以这也是为什么flex为数值可以各自按比例分配给各个子元素

2. 3 flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

<style>
    .container {
        display: flex;
        width: 400px;
        border: 1px solid #ccc;
    }
    .a1 {
        height: 200px;
        flex:0 2 auto;
        width: 100px;
        background-color: cyan;
    }

    .a2 {
        flex:0 1 auto;
        height: 200px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        flex:0 1 auto;
        height: 200px;
        background-color: red;
        width: 300px;
    }

</style>
<body>
    <div class="container">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

从上面代码来看所有子的总宽度为a1(100px)+a2(200px)+a3(300px)=600px,父元素的宽度为400px,不够?少了200px,同理按照上面的扩展规律，a1收缩比例为2/4,a1,a3收缩比例为1/4,所以a1的宽度为100-2/4200=0px,a2的宽度为200-1/4200=150px,a3的宽度为300-1/4*200=250px,但结果是这样吗？看下图
在这里插入图片描述
看图显示的结果和上面算的不对，其实收缩规则和扩展规律算法不一样，按扩展的那种算法如果a1的flex-shrink再大些，那么a1的宽度都要变成负数了？所以flex-shrink并非严格比例的缩小，它还会考虑元素本身的大小，来看下正确的计算方式，a1的缩小系数为2*100/2*100+1*200+3*100=2/7,a2的缩小系数为1*200/2*100+1*200+3*100=2/7,a3的缩小系数为1*300/2*100+1*200+3*100=3/7,所以a1的宽度为100-2/7*200=42.86px,a1的宽度为200-2/7*200=142.86px,a3的宽度为300-3/7*200=214.29px,算出的结果和上面一致


3. align-items和align-content的区别

先看初始代码

<style>
    .container {
        display: flex;
        width: 800px;
        border: 1px solid #aaa;
    }

    .a1 {
        height: 60px;
        width: 200px;
        background-color: cyan;
    }

    .a2 {
        height: 100px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        height: 200px;
        background-color: red;
        width: 200px;
    }

    .a4 {
        height: 80px;
        background-color: darkkhaki;
        width: 200px;
    }

    .a5 {
        height: 100px;
        background-color: darkseagreen;
        width: 200px;
    }

    .a6 {
        height: 90px;
        background-color: deeppink;
        width: 200px;
    }
</style>

<body>
    <div class="container">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
        <div class="a5"></div>
        <div class="a6"></div>
    </div>
</body>

先来设置 align-items: center

    .container {
        display: flex;
        width: 800px;
        align-items: center;
        border: 1px solid #aaa;
        flex-wrap: nowrap;
    }

当父容器没设置高度且布局nowrap只有一行的情况下align-items是有效果的，居中对齐！
在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        align-content: center;
        border: 1px solid #aaa;
    }

当父容器没设置高度且布局nowrap只有一行的情况下 align-content: center无效！还是贴顶对齐！
在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        height: 500px;
        align-items: center;
        border: 1px solid #aaa;
    }

当父容器设置了高度且布局nowrap只有一行的情况下align-items是有效果的，居中对齐！

在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        height: 500px;
        align-content: center;
        border: 1px solid #aaa;
    }

当父容器设置了高度且布局nowrap只有一行的情况下 align-content: center无效！还是贴顶对齐！

在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid #aaa;
    }

当父容器没设置高度且布局wrap多行的情况下align-items是有效果的，居中对齐！
在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        flex-wrap: wrap;
        align-content: center;
        border: 1px solid #aaa;
    }

当父容器没设置高度且布局wrap多行情况下 align-content: center无效！还是贴顶对齐！
在这里插入图片描述

   .container {
        display: flex;
        width: 800px;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid #aaa;
    }

当父容器设置高度且布局wrap多行的情况下align-items是有效果的,但是行与行之间有空隙，因为flex布局会将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐
在这里插入图片描述

    .container {
        display: flex;
        width: 800px;
        height: 500px;
        flex-wrap: wrap;
        align-content: center;
        border: 1px solid #aaa;
    }

当父容器没设置高度且布局wrap多行情况下 align-content: center有效！整体居中对齐，与justify-content对齐相似！

在这里插入图片描述

还有一种另类情况（这种情况用的很少）

<style>
    .container {
        display: flex;
        width: 800px;
        height: 500px;
        flex-wrap: wrap;
        align-content: center;
        border: 1px solid #aaa;
    }

    .a1 {
        height: 60px;
        width: 200px;
        background-color: cyan;
    }

    .a2 {
        height: 100px;
        background-color: darkgreen;
        width: 200px;
    }

    .a3 {
        height: 200px;
        background-color: red;
        width: 200px;
    }

</style>

<body>
    <div class="container">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
    </div>
</body>

当父设置了高，子元素只有一行的时候，并且设置 flex-wrap: wrap的情况下 align-content会生效！
在这里插入图片描述

结论：

  1. align-items不管父有没有高，单行还是多行，都会生效，注意它的基本单位是每一个子项（每个元素），以元素为单位的，它会将交叉轴上的多余空间按行数平均分给每行，所以每行的高度是平均分给每行的高度+每行子元素最高的高度，然后每个元素在这个高度范围内进行flex-start flex-end center等进行布局！
  2. align-content的基本单位是每行，每行的高度是一行中最高元素的高度，一定是在 flex-wrap: wrap（不管单行还是多行） 且 父有固定高度时候才会生效！，它的对齐方式和主轴justify-content对齐方式相似！
世态炎凉！！
关注
专栏目录
一种面向多设备跨平台的高性能自适应布局能力研究和实现【附实现代码—ArkTS】鸿蒙应用开发技术
一键难忘的博客
08-07 2509
通过结合 ArkUI 的自定义组件能力、布局机制以及可能的性能优化技术，我们可以实现一个高性能、自适应的瀑布流组件。虽然 GeometryReader 在这个特定场景中的直接应用可能有限，但它仍然是 ArkUI 提供的一个强大工具，可以在其他需要响应式布局的场合中发挥重要作用。在开发过程中，我们应该根据实际需求选择最合适的工具和技术来实现目标。
12个HTML和CSS必须知道的重点难点问题
Lee的博客
05-19 8433
这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cen...
css重难点:flex布局
weixin_39480614的博客
03-22 178
css重难点:flex布局 提要:作为前端学习,首先要知道每个属性都有什么作用,然后每一个属性一定要去试,试过才知道怎么去利用这个属性用到自己的项目当中. 一、准备知识,先简单了解flex布局 1. flex布局的设置 html <div class="box"> </div> css //两个flex的属性,区别在于div是否为行内元素 .box{ width:100...
了解认识flex布局的重难点知识以及移动端网页的特性
wlf2836789068的博客
07-20 94
我心向阳，必有太阳
Flex布局（弹性布局）
最新发布
ORANGE_3iING的博客
08-10 3604
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
【Flex弹性布局】Flex太难？通过可视化拖拽的方式包你一看就懂，非常直观
weixin_52095264的博客
07-10 534
手把手教你通过拖拉拽可视化的方式带你练习【Flex弹性布局】的各个属性，直观易懂！ 整个过程在众触应用平台进行，不用手写一行CSS代码。flex-direction：主轴的方向，即决定项目的排列方向row： 默认排列方向，即主轴为水平方向，起点为左侧row-reverse：主轴为水平方向，起点为右侧column：主轴为竖直方向，起点为上沿column-reverse：主轴为竖直方向，起点为下沿flex-wrap：当一行放不下所有的项目时，其换行与否以及换行方式nowrap：默认值，即不换行wrap：换行，第
11、CSS Flex排版：为什么垂直居中这么难？
所学所思
11-15 1705
在前面多次讲过，正常流排版的设计来源于数百年来出版行业的排版经验，而HTML诞生之初，也确实是作为一种“超文本”存在的。但是，自上世纪90年代以来，Web标准和各种Web应用蓬勃发展，网页的功能逐渐从“文本信息”向着“软件功能”过渡，这个思路的变化导致了：CSS的正常流逐渐不满足人民群众的需求了。这是因为文字排版的思路是“改变文字和盒的相对位置，把它放进特定的版面中”，而软件界面的思路则是“改变盒的大小，使得它们的结构保持固定”。因此，在早年的CSS中，“使盒按照外部尺寸变化”的能力非常弱。在我入行前端的时
带交互的 flex 布局教程，不懂都难
lefex的博客
10-19 178
flex 布局对于新手来说并不友好，学起来有点困难，而今天的文章通过可交互的方式告诉你每个属性的具体表现。比如 flex-direction 这个属性，你可以点击下面的 row、row-...
flex_布局_总结
leigangg的博客
04-21 206
父容器属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
Flex布局相关知识点
MYNN13的博客
07-17 4867
flex布局
面试官让我用Flex写色子布局，我直接给写了6个
小王的技术库
10-14 4259
面试中经常会被问道前端布局的实现，最典型的就是使用Flex实现色子的布局，这篇文章会逐步的介绍如何使用Flex实现色子的各个点数的布局。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
html5 header页面布局,html5+css3之CSS中的布局与Header的实现
weixin_35705523的博客
06-03 1242
前言我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口Hybrid中Header的实现往往是一个难点，主要原因是同一...
圣杯布局和双飞翼布局的原理探究
请叫我二狗哥
11-25 2221
浮动布局并不是再是流行的布局方式，不过基于浮动的经典布局还是经常出现在前端面试中，圣杯布局和双飞翼布局就是其中常考核的知识点。圣杯布局和双飞翼布局都是前端中三列设计布局方式，要求主要中间内容优先渲染，左右内容宽度固定，中间主要内容宽度自适应排布。圣杯布局和双飞翼布局都没有使用绝对定位，而是应用浮动、负外边距以及相对定位这几个核心知识点来实现。 圣杯布局 圣杯布局是让左右固定栏和中间自适应的主内容栏处于同一容器包裹中，容器（#container）设置padding-left、padding-right值，其
一劳永逸的搞定 flex 布局
FUNY丶
06-21 1373
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-ali
弹性布局知识点整理
骑在熊上的男人
12-05 700
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录弹性布局知识点整理1，主轴2，换行3,对齐方式justify-content属性4,交叉轴对齐使用弹性布局怎么实现水平垂直居中 弹性布局知识点整理 1，主轴 flex-direction属性决定主轴的方向 .box { flex-direction: row | row-reverse | column | column-reverse; } //row（默认值）：主轴为水平方向，起点在左端。 //row-reverse：主轴
为什么关于Flex的文章那么少
weixin_34279184的博客
11-29 118
我觉得Flex开发除了复杂外，有点多多，为什么关于Flex的文章那么少呢，不过去关注招聘网站，能发现现在关于Flex的职位越来越多了 。多少有点欣慰 转载于:https://www.cnblogs.com/favzone/archive/2009/11/29/1612906.html...
为啥Flex的性能相对较低？
m0_73643786的博客
06-12 213
的作用是可以弹性布局，但是这样也会使其在页面渲染时有可能产生二次布局，会影响性能。
flex布局应用
XinYe666666的博客
06-09 196
Head部分：css3部分：
flex布局
u012086400的专栏
01-10 386
1、等分<div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评论</router-link>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值