bootstrap5中网络与flex

Question

在 bootstrap5.3版本中默认情况下网格系统是基于 flex 实现的。

问题1：什么情况下是网格系统无法解决的布局必须使用 flex 才能实现？
问题2：在网格系统中 .col 类等分 .row 的空间是那几个属性起作用的？
问题3： 在使用 .row 类外层需要包裹一个 .container 容器之类的类名来抵消边距，为什么直接写 .row 类不在外面包裹一个容器类会出现浏览器会出现横向滚动条？

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

Answer 1

Brian 2024-09-30 10:42:56

问题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，宽度是根据内容自动适配的，自己可以按照自己的喜好修改样式

• 提问者 慕粉3946981 #1

  问题3：直接使用 .row 类会出现一个横向滚动条的原因在于margin-right: -0.75rem; 影响了，这个 -0.75rem 默认换算成 -12px。一个块盒子在没有主动设置 width 的情况下设置了左右负的 margin 值则该 margin空间会变成元素的 content 内容宽度(可以上个背景色测试一下)，简单点就是会超过父盒子 content 宽度，该盒子左边12px的内容超出了视口，但不影响横向滚动条的出现。而右边多出的 -12px 就是出现滚动条的原因。

• 提问者 慕粉3946981 #2

  问题3继： .container 之类的容器类有一个左右内边距，分别是 0.75rem; 换算成 12px 的情况下。由于子元素 .row 是块盒子，默认情况下宽度为 .container 的 content 宽度 ( 不包含父盒子 padding 等部分 )，.row 盒子通过负的左右 margin 来让其 content 宽度占满 .container 之类的容器类宽度

• 提问者 慕粉3946981 #3

  问题2:  .col 类会等分 .row 的空间原理是通过  flex-grow: 1; 实现的 ( 内部源码使用 flex: 1 0 0%; 简写属性 )。
  .row > * 选择器设置了一个 width: 100%; 但 flex-basis: 0% 优先级更高会把 width: 100%; 覆盖掉，flex-basis 设置了初始化尺寸为 0%; 然后由 flex-grow: 1; 等分容器空间

点开查看后面2条评论