How to display flex css actually work (bootstrap)-CodePudding

i wanna ask something about 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>

how to display flex can manage width flex item with width 100% and 50% ?

Thankyou :)

CodePudding user response：

In BS, if you want to have that kind of 2:1 ratio of width of elements, you'd have to use the grid system. Your above code will turn into:

<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>

CodePudding user response：

Here's how to use Flex's Bootstrap, The 'col' has to be used to give the width of the box

<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>