1回答

Brian

2024-09-30

问题1：什么情况下是网格系统无法解决的布局必须使用 flex 才能实现？

——比如，不确定数量的动态布局、水平垂直居中、子元素宽度自适应、元素需要按照内容进行空间分配

问题2：在网格系统中 .col 类等分 .row 的空间是那几个属性起作用的？

——col，主要是flex属性，比如col默认就是flex:1 0 0%，代表flex-grow: 1; flex-shrink: 0; flex-basis: 0%; ;而row，就是一个block，其中会有一些padding及margin属性；

问题3： 在使用 .row 类外层需要包裹一个 .container 容器之类的类名来抵消边距，为什么直接写 .row 类不在外面包裹一个容器类会出现浏览器会出现横向滚动条？

——row里面加入负padding的设计这个是bootstrap设计容器、布局的时候的刻意为之。

.row类通过加入负padding来抵消.col类的内padding，让其能正确的排列。加入conatiner包裹也是为了抵消padding差异，否则会出现滚动条。

课程8分，代码19行，我个人认为css代码写的有些问题，无须设置 button 宽度为 w-100。flex布局的项目里面交叉轴尺寸默认拉伸至容器尺寸，弹性盒子机制再手动设置反而多此一举

——按钮默认是inline-block，宽度是根据内容自动适配的，自己可以按照自己的喜好修改样式

0

5

慕粉3946981

问题1：这个回答有些笼统 不确定数量的动态布局 这个可以使用 .col .col-1 来实现 水平垂直居中 这个直接添加一个 .align-items-center 或 flex 元素添加一个 .align-self-center 即可实现 子元素宽度自适应 不清楚指的是基于内置的哪几个视口断点来适应还是什么，.col就是自适应 元素需要按照内容进行空间分配 这个可以使用 .col-auto 或在 .row 类名上添加 .row-cols-auto 来实现 这个问题，我也思考了一下。这种情况下基于网络系统几乎无法实现。 .row 里面有多行，并且每行有几个等宽列然后再添加一点列与列的 gap 间隙，这种情况下网络系统无能为力

2024-09-30

共5条回复