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

Question

[Сергей Кореневский]

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

. Интересует стиль Flex для упорядочивания в одну строчку 2х блоков, но чтобы высота у этих блоков была одинаковая по контенту, и чтобы между этими блоками не было пустоты. чтобы по ширине 2 блока занимали всю ширину, Но ширина у них разная, так как количество содержимого блоков разный объем.
.
Ответ:

<div style="display: flex">
    <div style="flex: auto"></div>
    <div style="flex: auto"></div>
</div>

Answer 1

[Константин Боровик]

Если я вас правильно понял, то действия следующие:
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, чтобы она растянулась на оставшуюся ширину.
Вот пример. Надеюсь я вам помог =)

Comments

[Сергей Кореневский]

Вы гений и гуру. Моя проблема стала решенной.
Для любопытства: есть ли возможность чтобы ширина колонок выбиралась автоматически в зависимости от содержимого?

[Константин Боровик]

Сергей Кореневский, если не указывать у дочек свойства flex-grow, то ширина выбирается автоматически и зависит от внутреннего содержимого. Почти тот же самый пример только без flex-grow и с внутренними элементами определённой ширины. Также советую ознакомиться со свойством justify-content (очень удобное свойство) и с вот этими статьями: тык 1 и тык 2. Периодически ими пользуюсь, когда забываю как действует то или иное свойство flex-объектов.

[Сергей Кореневский]

Константин Боровик, Вы не правильно поняли мой вопрос.
Я имею в виду что:

<div style="width:100%">
<div> Мало текста</div>
<div> Очень много текста</div>
</div>

Чтобы ширина автоматически выбиралась но при этом было заполнено все пространство родительского контейнера.

<table style="width:100%">
<tr>
<td> Мало текста</td>
<td> Очень много текста</td>
</tr>
</table>

[Константин Боровик]

Сергей Кореневский, ага, ну да я неправильно понял... к сожалению такое провернуть можно если заранее знать какой из дочерних контейнеров будет больше. Тогда ему можно задать свойство flex-grow, тогда этот элемент будет растягиваться на всё свободное пространство, а остальные дочерние элементы будут иметь ширину внутреннего контента (это свойство не обязательно одному элементу присваивать). Ещё как вариант с явным указанием ширины дочерних элементов. Оба варианта мне не особо импонируют, однако других я не вижу =(

[Сергей Кореневский]

Константин Боровик, Уважаемый Константин. Прошу Вас дать совет.
После того как Вы мне ответили еще в декабре, я прочитав ваше сообщение на половину. Взялся и сделал сайт с использованием FLEX, как будто мне стало все ясно. Он работает как TABLE. Теперь я вновь делаю сайт с FLEX поэтому решил повторить свой подвиг. и прочитал все наши сообщения и я понять не могу. Как у меня получилось в прошлый раз сделать разметку. magazin-firm.com Посмотрите пожалуйста , Почему верхнее меню себя ведет как TABLE. Сейчас я повторяю все, но у меня не получается.

[Сергей Кореневский]

Кажется получилось, но может не в этом дело.
Я добавил к дочернему элементу стиль flex: auto;
Как думаете?

[Константин Боровик]

Сергей Кореневский, тут дело в поведении flex-объектов при установленном свойстве flex-grow. Изначально каждому дочернему элементу присваивается что-то вроде минимальной ширины. Если внутренний контент будет шире чем эта величина, то и сам элемент начнёт расширяться, а остальные в меру своих возможностей будут сжиматься.Поэтому оно и ведёт себя в некоторых случаях как и display:table. Тут важно понять, что дочерние элементы будут заполнять пространство, попа их внутренний контент это позволяет. Насчёт свойства flex:auto : оно делает примерно тоже самое, что и flex-grow, просто у него более широкий смысл, это свойство устанавливает значения для flex-grow, flex-shink и flex-basic.

[Сергей Кореневский]

Константин Боровик, Но я для вложенных элементов применил FLEX: AUTO;
И Вложенный элемент заполнил все оставшеяся пространство, при том что содержимое было очень очень минимально элемента для которого был применен FLEX: AUTO; .
По высланному сайту я попробовал уменьшать шрифт, и дейстительно когда текст в пунктах меню был в одну строку, то и ширина элементов только теперь началась уменьшаться. Но применив свойство FLEX: AUTO; и уменьшив шрифт до минимума то ширина элементов НЕ УМЕНЬШИЛАСЬ.!!!!!!!!!!

[Константин Боровик]

Сергей Кореневский, при flex:auto присваиваются сл. значения: flex-grow:1, flex-shrink:1, flex-basic:auto. Так что ваши элементы в этом случае ведут в соответствии с этими свойствами.

[Сергей Кореневский]

Константин Боровик, Вы правильно говорите, разумеется. Но это как раз и есть такое же поведение как будто TABLE.