Dier_Sergio_Great
@Dier_Sergio_Great
Увлеченный человек

Как использовать стиль DISPLAY: FLEX, чтобы он соответствовал стилю DISPLAY:TABLE в CSS?

Какой использовать стиль Display: Flex;
чтобы он был аналогичен display: table
1. Вариант с строчками.
2. Вариант с колонками.

. Интересует стиль Flex для упорядочивания в одну строчку 2х блоков, но чтобы высота у этих блоков была одинаковая по контенту, и чтобы между этими блоками не было пустоты. чтобы по ширине 2 блока занимали всю ширину, Но ширина у них разная, так как количество содержимого блоков разный объем.
.
Ответ:
<div style="display: flex">
    <div style="flex: auto"></div>
    <div style="flex: auto"></div>
</div>
  • Вопрос задан
  • 1262 просмотра
Решения вопроса 1
@PushMeNow
.NET Developer
Если я вас правильно понял, то действия следующие:
1. Берём родительский блок, задаём flex. Задаём два дочерних блока. Высота дочерних блоков будет равна высоте родительского. Это специфика flex-объектов.
<div style="display:flex">
  <div></div>
    <div></div>
  </div>
</div>

2. Для манипуляции ширины дочерних блоков используется свойство flex-grow:
<div style="display:flex">
  <div style="flex-grow:2"></div>
    <div style="flex-grow:1"></div>
  </div>
</div>

Это свойство действует как пропорция, всё пространство родителя делится на суммарное число flex-grow и каждой дочке выделяется столько частей, сколько указано в её flex-grow.
Можно также одной из дочек явно указать ширину width. Тогда другой дочке нужно присвоить flex-grow:1, чтобы она растянулась на оставшуюся ширину.
Вот пример. Надеюсь я вам помог =)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы