Как растянуть блок на всю ширину если он один, а если два то чтобы они занимали равные места?

Question

[wonder_uix]

Например вот простая разметка:

<div class="group">
   <div class="tile">
      1
   </div>
   <div class="tile">
      2
   </div>
</div>

Через flex?

Comments

[Ankhena]

Через flex?

Да.
И flex-grow
https://codepen.io/AnnaSummer/pen/XWqwPQp

Пройдите игру про флексы и многие вопросы отпадут https://codepen.io/AnnaSummer/pen/XWqwPQp
И это почитайте https://habr.com/ru/post/329820/

Answer 1

[Илья Корень]

Да, через флекбокс, с помощью свойства flex-grow
https://codepen.io/pen

update: + увидел вопрос, что в рамках одной строки должно быть не больше 2х блоков и должен быть перенос.
В такой случае - вам нужно ограничить ширину флекс-контейнера, чтобы в нем помещалось не более 2х флекс-элементов. И добавить свойство: flex-wrap.

Comments

[wonder_uix]

Я усложнил верстку, добавил слева блок с "изображением" (на деле квадрат) и перенос не работает. Можете посмотреть где я допустил ошибку?
https://codepen.io/unisns/pen/ZEoNqzp

[Илья Корень]

уточните, а что по переносам должно быть, вместе с блоком изображения? Какой должен быть результат?

[wonder_uix]

Илья Корень, а я уже понял где я ошибся :)
в стилях .tile я прописал flex: 1 и выходил такой результат

затем исправил на flex-grow: 1 и вышло то что мне нужно


и теперь такой вопрос - как мне можно контролировать выравнивание содержимого .tile? Если блок один чтобы текст и картинка стояли как на картинке ниже, а потом чтобы картинка с текстом перестроились если блоков .tile две штуки

[Илья Корень]

хм, тут скорее уже без JS не обойтись.
Вы можете также display: flex задать к блокам с текстом и картинкой.
Если нужно как на скрине 2, то flex-direction: column задаете этому блоку и у вас картинка с текстом будут как на втором скрине.
Но чтобы сделать логику перестроения, если блок только один или их несколько, то в данном кейсе думаю без JS не обойтись.

Либо кстати как вариант попробуйте: розовым блокам (с текстом и картинкой) задать flex-wrap: wrap.
И сделайте так, чтобы когда блоков становилось меньше, то картинка и текст не умещались в одну строку и за счет flex-wrap переносились - вот, вариант лучше и логичнее. Если что пишите.

[wonder_uix]

Илья Корень, у меня не получилось :(
https://codepen.io/unisns/pen/ZEoNqzp
при flex-wrap: wrap и float: right у одиночного блока выходит все классно но как только .tile блоков становится два все очень грустно

[Илья Корень]

wonder_uix, Вам нужно для .tile-inner, .tile-image, .tile-text ограничить ширину. Чтобы при нескольких блоках, суммарная ширина этих блоков превышала ширину .title-inner и тут сработает перенос.

Answer 2

[Антон Неверов]

Comments

[wonder_uix]

А как задать ширину блока .tile чтобы был авто перенос блоков если их больше 2?
Чтобы на каждую строку было не больше 2 блоков .tile?