Как сверстать такой блок на флексах с изменением порядка его элементов?

Question

[Влад]

Гриды не нужно.

Песочница: https://codepen.io/vlad-tarasoffka/pen/QWYyzZd

Сделать как на картинке. Не пойму как высоты третьей картинки сделать 100% на десктопе. А так поменять через order не проблема.

Comments

[Ankhena]

При неизвестном количестве контента (т.е. без возможности указать родителю фикс высоту), на флексах без доп.оберток - никак.
Соответственно, либо добавлять обертку либо вычислять высоту на js.

Но самый разумный способ это гриды.

[Сергей delphinpro]

Зачем его верстать на флексах? Ни одной причины для этого нет.

[Ankhena]

Влад, не будем флудить в чужом ответе.

См. изображение в вопросе. 1) Десктоп 2) Смартфон

Никакие обёртки тут не нужны, иначе порядок не поменяешь и 3-й блок не воткнёшь между 1-м и 2-м.

Я смотрю изображения. На них нет 3 между 1 и 2. Но обоих скринах идет 1, 2 потом 3. Т.е. 1 и 2 легко объединяются оберткой.

Но если нужно поменять, то в теории есть display contents, но это не поможет вашему клиенту с его древним компом.

Answer 1

[Danny Arty]

Добавить:

* {
   box-sizing: border-box;
}
.wrapper {
   flex-wrap: wrap;
}
.block {
   flex-grow: 1;
}

Answer 2

[Sergey]

Так а чем такой вариант вас не устраивает ?

<div class="container">
        <div class="block">
            <div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
            <div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
        </div>
        <div class="block">
            <div class="sub-block">Блок 3</div>
        </div>
    </div>

.container {
        width:800px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
    }
    .block {
        width: 100%;
        border: 1px solid black;
        padding: 20px;
        box-sizing: border-box;
    }
    .sub-block {
        margin-bottom: 20px;
    }

Comments

[Влад]

Нет. Это работает только на десктопе, поэтому первые два нельзя запихивать в блок, потом не перестроишь на (см. картинку и пример)

[Sergey]

Вторая картинка, можно и так перестроить

@media (max-width: 767px) {
        .container {
            flex-direction: column;
        }
    }

[Павел]

Влад, Представленный в этом ответе вариант - единственно возможный для решения вашей задачи с использованием только flex...при верстке с одним родителем у всех 3 блоков, флексом так элементы не выстроить.
Только у .block width скорее всего не 100%, а 50% для декстопа, и потом 100% уже для мобилки.

[Ankhena]

Влад,

потом не перестроишь

Перестроишь.
Для этого есть display contents.

Но повторю, что разумно решать эту задачу гридами, а не костылями.

[Влад]

Ankhena, с гридами всё понятно. Покажите пожалуйста, как решается подобная задача на флексах.

[Ankhena]

Влад, да сколько можно-то? Я ведь в комментарии под вопросом уже написала, что при неизвестном содержимом без доп оберток или js никак

[Влад]

Ankhena, Я не понимаю как это сделать с использованием дополнительных обёрток без JS.

[Ankhena]

Влад, эммммм, теперь уже мне сложно.
Ответ с доп обертками вы отметили решением, что вам в нём не понятно?

[Влад]

Ankhena, Я погорячился, отметив это решением.

Очень сложный и скупой заказчик, у которого система стоит старая на компе. Туда новые браузеры не ставятся. Возможно с гридами будут проблемы.

См. изображение в вопросе. 1) Десктоп 2) Смартфон

Никакие обёртки тут не нужны, иначе порядок не поменяешь и 3-й блок не воткнёшь между 1-м и 2-м.