文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
描述二：display - flex - 可伸缩项属性
Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：
1. flex-basis：基础值
2. flex-grow：拉伸弹性系数，如果容器宽度减去弹性项的基础值之和之后还有剩余空间，那么就按照弹性系数比例去分配剩余空间
3. flex-shrink：缩减弹性系数，和拉伸弹性系数逻辑相反
这三个属性应用给弹性项，而不是容器。
现在首先给所有的"li"添加"flex: 1 0 0%"属性，该属性的三个值分别为flex-grow、flex-shrink和flex-basis，表示：当有剩余空间时均匀分配剩余空间、当超出容器宽度时不进行缩放、弹性项的基础值都为容器的0%。此时可以看到四个每个"li"标签的宽度都为125px，分别占据了容器的1/4。现在再单独给第一个"li"标签设置"flex-grow: 2"属性，此时又会发现所有"li"标签的宽度比值为2:1:1:1。
根据题目所示，仍然是对display:flex知识的加深，想了解更多的可以看一下上文的链接我对display知识的讲解，现在开始解题。
描述三：display - flex - 标签
通过之前的学习，现在来实现一组标签，表示星球的种类。当前的"li"标签都是行内盒子，虽然看似实现了标签效果，但是每一行的宽度却没有保持一致，当进行缩放时，布局会特别的混乱。现在使用Flex布局将当前的布局方式进行优化，首先删除"li"标签的"display: inline-block"属性，给"ul"添加"display: flex"使该元素称为弹性容器。再给容器添加"flex-wrap: wrap"属性表示换行，否则所有标签会在第一行排列。此时标签已经分行排列了，但，每一行的宽度看起来依然是不同的，这时候需要通过给弹性项添加属性，通过之前讲过的"flex"属性入手。继续给所有的"li"标签添加"flex: 1 0 auto"属性，auto代表在计算剩余空间时需要减去每个标签自身的宽度而不是之前讲的0%那样忽略了自身的宽度。此时标签功能基本上是完成了，但是注意，最后一行可能因为页面的缩放导致只有一个标签却占满了一整行。那么继续给所有的"li"标签设置"max-width: 10rem"即可，此时最后一行标签虽然少但是看起来依旧很和谐。
根据题目所示，仍然是对display:flex知识的加深，想了解更多的可以看一下上文的链接我对display知识的讲解，现在开始解题。
描述四：display - flex - order
使用Flexbox的order属性，可以完全摆脱项目在源码中顺序的约束。默认情况下，每个项目的order值都为0，意味着按照他们在源代码中的顺序进行排列。可以观看右边的代码效果，从设计上说，把图片放在最前面可以抓住读者的眼球，是比较好的设计方式，但是对于浏览器而言，拿到标题并且直接将标题呈现给读者的代价一定比获取一张照片并渲染出来小得多。所以可以考虑折中的方式，先渲染标题但是优先显示图片。
现在给"img"图片标签设置"order: -1"属性，此时观察效果会发现图片的排列在标题之上，其他内容的相对位置不会变，它们的order值仍然是0。order的值不一定要连续，并且正负都可以。
根据题目所示，仍然是对display:flex知识的加深，想了解更多的可以看一下上文的链接我对display知识的讲解，现在开始解题。
描述五：display - grid
Grid，即网格布局。它将页面划分为一个个网格，可以任意组合不同的形态，做出理想的布局效果。Grid布局与Flexbox布局的区别在于，Flexbox是根据轴线对弹性项进行排列，而Grid布局是将容器划分为行和列，产生单元格，然后再对单元格进行操作。
采用网格布局的区域称为容器。容器内部采用网格定位的每个子元素称为容器项，也是单元格。划分网格的线称为网格线，比如，3x3的网格有4条水平网格线和4条垂直网格线。
现在给section盒子设置"display: grid"属性，将该盒子变成一个容器。现在需要通过给该容器划分行和列来生成单元格，给容器设置"grid-template-rows: 100px"和"grid-template-columns: repeat(2, 1fr)"两条属性以生成一个Nx2的网格，且每个容器项的宽度比为1:1、第一行的高度为100px（注意：实际上行高度可以不用设置，会根据每个容器项自动撑开，但如果设置了，就要考虑清除需要多少行，当前的行值100px仅为第一行，如果需要前三行都为100px，需要设置为"grid-template-rows: 100px 100px 100px"）。repeat方法可以简化属性值的书写，为了方便表示比例关系，网格布局提供了fr关键字，该关键字和flex-grow颇为相似。实际上如果想固定大小，完全可以将单位全部设置为固定的px值。现在继续给容器添加"grid-gap: 10px"属性，该属性为"grid-row-gap"和"grid-column-gap"两个属性的简写，分别代表行间距和列间距。
根据题目所示，仍然是对display:flex知识的加深，想了解更多的可以看一下上文的链接我对display知识的讲解，现在开始解题。
描述六：display - grid - 区域
网格布局允许指定区域，一个区域由单个或多个单元格组成。根据上一节学习的内容，请将"section"设置为网格布局容器，并且生成一个3x3的网格，该网格容器项的宽度、高度都为100px。再给容器添加"grid-template-areas: ‘a b c’‘d e f’‘g h i’"属性，表示3x3的网格区域划分从左到右、从上到下依次为a、b、c、d、e、f、g、h、i。现在给第一个"article"标签设置"grid-area: e"属性，此时可以看到数字1已经被移动到了最中间的区域，即区域"e"。
根据题目所示，仍然是对display:flex知识的加深，想了解更多的可以看一下上文的链接我对display知识的讲解，现在开始解题。
每次做完题提交成功的话都会弹框配带音乐鼓励你，我很庆幸，因为我找到了牛客。
个人总结：
今天题目就讲解到这，承接对上篇文章的内容对知识进一步加深学习，人的记忆可能会遗失，但人的潜力是无限的。每天刷题一次，对已学的知识不断巩固，这样的人是很容易成功的。牛客讲真的确是一个好的刷题网站，对于基础薄弱的人来说不亚于福音，如果认同我的话，就点击右边链接注册刷题吧🥑：牛客网
加油！！！未来伟大的前端工程师，可能就是你~~，点个关注一起加油！冲！
文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
