Блог

Главная - Вопросы по программированию - Как отобразить фактическую работу css flex (начальная загрузка)

Как отобразить фактическую работу css flex (начальная загрузка)

#html #css #twitter-bootstrap #flexbox

Вопрос:

я хочу кое-что спросить о гибком дисплее

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

как отобразить гибкий график можно ли управлять шириной гибкого элемента с шириной 100% и 50% ?
введите описание изображения здесь

Спасибо 🙂

Ответ №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>

Комментарии:

1. что я хочу спросить, что, если мы использовали display flex? зачем выводить такую картинку ?

2. row использует гибкий дисплей. Вы можете просмотреть его в браузере и проверить.

Ответ №2:

Вот как использовать загрузчик Flex, » 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>
Метки: