0

Здравствуйте, есть блок с width 100% (адаптивная верстка), так вот в нём есть 4 блока, как можно сделать чтобы 3й и 4й были на всю длину и переносились на новую строку (грубо говоря), не сжимаясь с другими? То есть как обычный div со 100% width? пробовал поиграть с flex-basis, flex-grow но что-то ничего не получилось

<div class="parent" style="width: 100%; display: flex;">
<div>этот и <div>
<div>этот блок, вместе</div>
<div>а вот этот<div>
<div>и этот, с переносом</div>

Картинка:

https://pp.userapi.com/c837422/v837422896/5c405/ksoi9SJcK5M.jpg

7
  • Давайте код того что вы сделали 9 окт 2017 в 13:58
  • @RazmikGalstyan там к сожалению ничего нет, родительский блок с display flex, и внутри него 4 блока. 9 окт 2017 в 14:02
  • Давайте то что есть. Во всех вопросах что здесь зададите. 9 окт 2017 в 14:03
  • flex-wrap?. . .
    – andreymal
    9 окт 2017 в 14:07
  • @RazmikGalstyan done 9 окт 2017 в 14:10

1 ответ 1

1

Для родителя: display: flex; flex-wrap: wrap;. Для 1-го flex: 0 1 25%;. Для 2-го flex: 1 1 auto;. Для 3 и 4 блока flex: 0 1 100%;.

https://jsfiddle.net/ky3zxds8/1/

1
  • Спасибо, работает как надо. 11 окт 2017 в 14:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.