如何显示 flex css 实际工作（引导程序）答案

【问题标题】：How to display flex css actually work (bootstrap)如何显示 flex css 实际工作（引导程序）
【发布时间】：2021-11-08 02:39:14
【问题描述】：

我想问一些关于 display flex 的问题

<div class="container mx-auto">
       <div class="d-flex">
           <div class="bg-red-300  w-100 mr-3">halo</div>
           <div class="bg-red-300  w-50 mr-3">halo</div>
       </div>
   </div>

如何显示 flex 可以管理宽度为 100% 和 50% 的 flex 项目？

谢谢你:)

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

在 BS 中，如果您想要 2:1 的元素宽度比，则必须使用网格系统。你上面的代码会变成：

<div class="container mx-auto">
        <div class="row">
            <div class="col-8 bg-red-300 mr-3">halo</div>
            <div class="col-4 bg-red-300 mr-3">halo</div>
        </div>
    </div>

【讨论】：

我想问如果我们使用了 display flex 会怎样？为什么要输出那样的图片？
row 确实使用了显示弹性。您可以在浏览器中检查并检查。

【解决方案2】：

这里是如何使用 Flex 的 Bootstrap， 'col' 必须用于给出框的宽度

<div class="container">
    <div class="row">
        <div class="col-6 bg-red-300">halo</div>
        <div class="col-6 bg-red-300">halo</div>
    </div>
</div>

【讨论】：