乐趣区

关于前端:关于-flex-面试题总结

jiezi

title: flex 从总结到理解
date: 2021-10-19 17:09:22
tags:

  • flex

categories:

  • [前端开发, CSS]

author: 轻松学英语

flex 是一种布局形式，在 CSS3 之后开始有。它次要由父容器和子项组成，父容器有六个属性，别离为：

  • 管制主轴轴向：flex-direction

    • row：横轴（默认）
    • row-reverse：倒过去的横轴
    • column：竖轴
    • column-reverse：倒过去的竖轴

  • 换行形式：flex-wrap

    • nowrap：不换行（默认）
    • wrap：换行
    • wrap-reverse：反着换行
  • 主轴排列：justify-content
  • 穿插轴排列：align-items

  • 轴向与换行组合设置：flex-flow（流向）

    • 个别很少用这个属性，即扭转子项的布局程序，正着来，倒着来

子项也有六个属性，别离为：

  • 弹性扩大：flex-grow

    • 指定容器残余空间多余时的调配规定
    • 默认值为 0，多余空间不调配

  • 弹性膨胀：flex-shrink

    • 指定容器残余空间有余时的调配规定
    • 默认值为 1，空间有余要调配；如果为 0，示意不调配

  • 根底尺寸：flex-basis

    • 指定 flex 元素在主轴方向上的初始大小（根底尺寸）
    • 默认值为 auto，即我的项目自身大小

  • 缩写：flex

    • flex-grow、flex-shrink、flex-basis 的缩写
    • 默认值为 0 1 auto
  • 主轴程序：order
  • 穿插轴对齐形式：align-self

总的来说， 父容器管制整体布局，子项管制子项布局

在面试中，经常不会问怎么宽泛，最常见的 flex 面试题为：

  • flex: 0 1 auto 怎么了解？
  • flex: 1 具体代表什么，有什么利用场景
  • flex: 0、flex: 1、flex: none、flex: auto，示意什么意思，并利用在什么场景下应用？

要想答复这些问题，咱们必须理解子项中的 flex 属性

flex 语法 

flex: none | auto | [< 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' >];

单管道符 |，示意排他。也就是这个符号前后的属性值都是反对的，且不能同时呈现。因而，上面这些语法都是反对的：

flex: auto;
flex: none;

flex: [< 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' >];

方括号 [...] 示意范畴。反对的属性在这个范畴内

其中 ?，示意 0 个或者 1 个，也就是说 flex-shrink 属性可有可无。因为 flex 属性值也能够是 2 个值 

flex: auto;
flex: none;
/* 2 个值 */
flex: 1 100px;
/* 3 个值 */
flex: 1 1 100px;

双管道 ||，示意”或者“的意思。示意前后能够离开独立应用，也就是 flex: flex-grow flex-shrink? 和 flex-basis 都是非法的。于是咱们又多了 2 种非法的写法：

/* 1 个值，flex-basis */
flex: 100px;
/* 2 个值，flex-grow 和 flex-shrink */
flex: 1 1;

转为文字表述

单值语法：

如果 flex 的属性值只有一个值，有三种状况

  • 一个无单位数，例如例如 flex: 1，示意 flex-shrink: 1，残余空间扩大。此时，flex-shrink 和 flex-basis 的值别离是 1 和 0%。留神，这里的 flex-basis 的值是 0%，而不是默认值 auto

    • 只有扭转 flex: 数字 ，flex-basis 的值就为 0
  • 一个无效的宽度（width）值，表现形式为长度值，例如 flex: 100px，示意 flex-basis: 100px，根底尺寸为 100px。此时，flex-grow 和 flex-shrink 的值都是 1，留神，这里的 flex-grow 的值是 1，而不是默认值 0
  • 关键字 none，auto 或 initial

双值语法：

如果 flex 的属性值有两个值，则第 1 个值肯定是 flex-grow，第 2 个依据值的类型不同示意不同的 CSS 属性，具体规定如下：

  • 数值：例如 flex: 1 2，则这个 2 示意 flex-shrink，此时 flex-basis 的值为 0%，而非默认值 auto
  • 长度值，例如 flex: 1 100px，则这个 100px 值 flex-basis，此时 flex-shrink 默认值为 0

三值语法：

如果 flex 的属性值有 3 个值，则长度值示意 flex-basis，其余 2 个数值别离示意 flex-grow 和 flex-shrink。上面两行 CSS 语句的语法都是非法的，且含意也是一样的：

flex: 1 2 50%;
flex: 50% 1 2;

flex 属性值场景利用

flex 默认值为 0 1 auto。除此之外，还有各种其余值

  • flex: none，等同于 flex: 0 0 auto;
  • flex: auto，等同于 flex: 1 1 auto;
  • flex: 1，等同于 flex: 1 1 0%;
  • flex: 0，等同于 flex 0 1 0%;

张鑫旭大神画过一张图：

单值语法 等同于 备注
flex: initial flex: 0 1 auto 初始值，罕用
flex: 0 flex: 0 1 0% 实用场景少
flex: none flex: 0 0 auto 举荐
flex: 1 flex: 1 1 0% 举荐
flex: auto flex: 1 1 auto 实用场景少

默认值 flex: initial

它等同于 flex:0 1 auto，示意 flex 容器有残余空间时尺寸不增长（flex-grow: 0），flex 容器尺寸有余时尺寸会膨胀变小（flex-shrink:1），尺寸自适应于内容（flex-basis:auto）

我的了解：子项总长度小于总容器时，不会去撑满（flex-grow:0），而按理论宽高度存在 (flex-basis:auto)；当子项总长度大于总容器时，子项会绝对于的膨胀绝对比例（flex-shrink:1）

实用场景

实用于子项总长度小于总容器的场景，例如按钮、题目、小图标等小部件的排版布局

flex: 0 和 flex: none 的区别

flex: 0 等同于设置 flex: 0 1 0%，flex:none 等同于 flex: 0 0 auto

flex: 0，因为是一个值且为数值，所以它示意 flex-grow，后续我发现只用设置了 flex: 数字 ，那么 flex-basis 就主动成了 0%，所以，设置 flex:0 的元素的最终尺寸示意为最小内容宽度；

留神：

flex: 1 === flex: 1 1 0%

flex: 0 === flex: 0 1 0%

flex 设置为数字后，尽管 flex-basis 为最小宽度，然而前者的 flex-grow 有值，能够把子项扩充斥容器，后者为 0，不扩大

flex: none，既不是数值也不是长度值，none 关键字。flex: 0 0 auto 示意元素尺寸不会膨胀也不会扩大，再加上 flex-basis: auto 示意固定尺寸由内容决定，因为元素不具备弹性，因为，元素内的元素不会换行，最终尺寸通常体现为最大内容宽度

实用应用 flex: 0 的场景

无论文字的内容给如何设置，左侧内容的宽度都是图像的宽度

适宜应用 flex: none 的场景

当 flex 子项的宽度就是内容的宽度，且内容永远不会换行，则适宜应用 flex:none，例如如下的场景，图片和按钮固定长度，内容弹性

flex: 1 和 flex: auto 的区别和实用场景

flex:1 等同于设置 flex: 1 1 0%，flex: auto 等同于 flex: 1 1 auto

能够看出两者的 flex-grow 和 flex-shrink 都是一样的，意味着它们都能够弹性扩大以及弹性膨胀，区别在于 flex: 1 中 flex-basis 为 0，即宽度为 0。flex:auto 中的 flex-basis 为 auto，即宽度为本身宽度

体现的样子为：

这里须要解释一下，因为我最开始也不了解，其公式为：

每个子项的宽度 =（总宽度 – flex-basis 的宽度）/ 3（以这个例子为例）

因为 flex:1 的 flex-basis 的宽度为 0，所以最初它的总宽度扩张或者膨胀时每个子项都能等分

实用于 flex: 1 的场景

当心愿元素充分利用残余空间，同时不会强占其余元素利用的宽度的实用，适宜实用 flex:1，例如所有的等分列表

之前实用 flex: none 的例子，同样设置文字局部 flex: 1 也能实现相似的成果

实用于 flex: auto 的场景

当心愿元素充分利用残余空间，然而各自的尺寸依照各自内容进行调配的时候，实用于 flex: auto

例如导航数量不固定，每个导航文字数量页不固定的导航成果就适宜实用 flex: auto

回过头来看之前说的面试题

  1. flex: 0 1 auto 怎么了解？
  2. flex: 1 具体代表什么，有什么利用场景
  3. flex: 0、flex: 1、flex: none、flex: auto，示意什么意思，并利用在什么场景下应用？

第一个问题答复

flex 的默认值为 0 1 auto，示意容器残余空间有多余的时候不扩大，有余的时候膨胀，子项的宽度依据本身的宽度来展现

第二个问题答复

脑子思考 flex 的值如果是一个值且为数字，阐明是 flex-grow:1，当它为数字时，flex-basis 会主动变成 0，所以它具体示意为 flex:1 1 0%，示意容器残余空间有多余的时候扩大，有余的时候膨胀，子项的宽度为 0。它个别实用于充分利用残余空间，又不强占其余元素的宽度，例如等分布局

第三个问题答复

flex:0，示意 flex: 0 1 0%，示意容器残余空间有多余的时候不扩大，有余的时候膨胀，子项的宽度为 0，实用设置在替换元素的父元素上

flex:1，看第二个答复

flex: none，示意 flex: 0 0 auto，示意容器残余空间有多余的时候不扩大，有余的时候也不膨胀，子项的宽度为本身宽度，实用于不换行的内容或者较少的小控件元素上

flex: auto，示意 flex: 1 1 auto，示意容器残余空间有多余的时候扩大，有余的时候膨胀，子项的宽度为本身宽度，实用于基于内容动静适配的布局（例如导航数量文字长度不固定）

flex:initial，示意 flex: 0 1 auto，示意容器残余空间有多余的时候不扩大，有余的时候膨胀，子项的宽度为本身宽度，实用于小控件元素的散布布局，或者某一项内容动态变化的布局

参考资料

  • flex:0 flex:1 flex:none flex:auto 应该在什么场景下应用？
  • CSS flex 属性深刻了解
  • MDN Web Docs flex
  • 一劳永逸的搞定 flex 布局

本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。

退出移动版