Макет Flexbox с двумя контейнерами [закрыто]CSS

Разбираемся в CSS
Ответить
Anonymous
 Макет Flexbox с двумя контейнерами [закрыто]

Сообщение Anonymous »

Есть ли способ добиться следующего макета с двумя контейнерами и флексбоксом? Оранжевый и красный прямоугольники представляют собой флексбокс-контейнеры с элементами в них, а синий и зеленый — это соответствующие заголовки групп. Я хотел бы посмотреть, смогу ли я выстроить в линию два гибких контейнера, как в предоставленном мной макете. Моя проблема в том, что если последний элемент первого контейнера переносится на следующую строку, он перемещает второй контейнер на новую строку. Я бы хотел, чтобы элементы из второго контейнера продолжали находиться на строке, в которой был обернут последний элемент первого контейнера.
Я пытаюсь получить такой макет, но не уверен, что это так. возможно с флексбоксом. Есть идеи?
Желаемый макет:
Изображение


Код: Выделить всё

.item-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
row-gap: 3.25rem;
padding-top: 1rem;
width: 100%;
}

.group-container {}

.main-container {
display: flex;
justify-content: space-between;
row-gap: 1.875rem;
width: 100%;
max-width: 220px;
flex-wrap: wrap;
}

.item {
width: 100px;
height: 100px;
background-color: red;
}

.item-2 {
width: 100px;
height: 100px;
background-color: orange;
}

.heading {
height: 20px;
width: 100%;
background-color: green;
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... containers
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»