Используйте гибкую обертку с растягивающимися элементами в виде строк

Я пытаюсь использовать flex-wrap и stretch без особого успеха. Все выглядит хорошо, пока ширина окна меньше высоты. Но как только я изменяю размер экрана, 2 строки становятся 1.

Я планирую использовать flex для отображения любого количества изображений, в основном с размерами 16:9. Итак, было бы здорово сделать макет более строковым, а не столбцовым. Спасибо!

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: center;
    position: fixed;
}

.item {
    min-width: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex-grow: 1;
}
.item:nth-child(1){
  background: red;
}
.item:nth-child(2){
  background: green;
}
.item:nth-child(3){
  background: blue;
}
.item:nth-child(4){
  background: yellow;
}

<div class = "container">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

Может быть, вы могли бы предоставить html

— 11.12.2020 16:09

Внутри есть div с классом container и 4 div с классом item

— 11.12.2020 16:17

вместо этого вы можете использовать сетку css, если вы собираетесь использовать галерею

— 11.12.2020 16:25

css flexbox

11.12.2020 15:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

217

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы исправить ваш код (второй метод будет более отзывчивым на маленьком экране):

Либо просто добавьте width: 50%; к .item, как в первой демонстрации ниже.
Либо просто измените min-width: 100px на min-width: 50%;

Но я бы порекомендовал вам использовать display:grid; как во втором демо (код намного проще.

ДЕМО на основе вашего кода:

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: center;
    position: fixed;
}

.item {
    min-width: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex-grow: 1;
    width: 50%;
}
.item:nth-child(1){
  background: red;
}
.item:nth-child(2){
  background: green;
}
.item:nth-child(3){
  background: blue;
}
.item:nth-child(4){
  background: yellow;
}

<div class = "container">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>
</div>

DEMO на основе сетки:

.container {
  display: grid;
  grid-template-columns: auto auto;
}
.item {
  min-width: 100px;
  min-height: 100px;
}
.item:nth-child(1){
  background: red;
}
.item:nth-child(2){
  background: green;
}
.item:nth-child(3){
  background: blue;
}
.item:nth-child(4){
  background: yellow;
}

<div class = "container">
  <div class = "item"></div>
  <div class = "item"></div>
  <div class = "item"></div>  
  <div class = "item"></div>
</div>

В итоге я использовал подход сетки, который вы предложили. Одно небольшое изменение: на самом деле я не хочу ограничивать количество столбцов двумя, поэтому я сделал это grid-template-columns: auto auto auto, и теперь оно отлично работает.

— 11.12.2020 16:52

11.12.2020 16:26