Может кто-нибудь объяснить мне эту проблему Flexbox CSS?

Question

demo: https://codesandbox.io/s/confident-bash-55v3z

Я читал учебник и столкнулся с этой проблемой.код простой

У меня есть flex-контейнер с именем images

<div class='images'>
  <img src='imgs/787.jpg' class="main" />
  <img src='imgs/sub1.jpg' class="sub1" />
  <img src='imgs/sub2.jpg' class="sub2" />
</div>

, а для таблицы стилей у меня есть

.images {
  width: 234px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid red;
}

.images > * {
  padding: 1px;
  height: 111px;  <--- this seems like a magic number to me 
}

img.main {
  flex-basis: 99%;
}

img.sub1,
img.sub2 {
  flex-basis: 49%;
}

предполагаемый вид выглядит так

Однако, когда я закомментировал строку height: 111px;, раскладка отключена

IЯ новичок в Flexbox и CSS в целом, и я знаю, что flex-basis мягкий как min-width.Если высота не равна 111px, изображение будет расти и занимать больше места, чем min-width (или flex-basis).

Поэтому мой вопрос заключается в том, чтобы добиться правильной компоновки, которую мы хотим, какАвтор оригинальной таблицы стилей знает, что высота должна быть 111px?Можем ли мы достичь этого макета, используя 'max-width' или другие методы, которые будут иметь больше смысла для меня?

Answer 1

Во-первых, о магическом числе.

У вас есть контейнер шириной 234 пикселя и два меньших изображения с естественными размерами 150 на 150 пикселей.Их общая ширина составляет 300 пикселей, что больше ширины контейнера, поэтому они не помещаются в одном ряду.

Мы можем исправить это, сделав их меньше.Но насколько маленькими они должны быть?Вокруг каждого изображения есть отступ в 1 пиксель, для двух изображений это 4 пикселя.Нам нужно вычесть это из ширины контейнера.Это оставляет 234 - 4 = 230 пикселей для двух изображений или 230/2 = 115 пикселей для каждого изображения.

В вашем примере размер изображений контролируется с помощью height и flex-basis.Использование обоих одновременно может привести к искаженным пропорциям.Это на самом деле происходит с верхним изображением в вашем примере «предполагаемый вид».Если вы сравните его с исходным изображением, вы увидите, что оно сжато по вертикали.

Также взаимодействие height и flex-basis совершенно неинтуитивно.Для достижения желаемого макета нам на самом деле не нужны оба, поэтому давайте отложим flex-basis.

Когда вы устанавливаете высоту изображения, не устанавливая его ширину, изображение автоматически пропорционально масштабируется.Поскольку наши изображения квадратные, установив высоту 111px, мы также неявно устанавливаем ширину на 111px.И поскольку 111 меньше 115, оба изображения помещаются в один ряд.В числе 111 нет ничего волшебного, подойдет любое число ниже 115.

Мы можем немного упростить код:

.images {
  width: 234px;
  display: flex;
  flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
  border: 1px solid red;
}

.images > * {
  align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
  box-sizing: border-box; /* include padding into the image width */
  padding: 1px;
}

img.main {
  width: 100%; /* occupy entire row */
}

img.sub1,
img.sub2 {
  width: 50%; /* occupy half of the row */
}

Демонстрация: https://codesandbox.io/embed/focused-faraday-bsd88

Попробуйтеизменяя ширину контейнера до 500px или 100px.Изображения автоматически масштабируются и сохраняют свои пропорции.

Answer 2

Вы не устанавливаете ширину или высоту для своих изображений, поэтому по умолчанию они принимают их истинные размеры.В этом случае ваши «вспомогательные» изображения шире, чем ширина, которую вы определили для своего контейнера, таким образом, на flex-flow: row wrap; изображения не могут быть в одной строке.Вы должны установить 50% ширины для ваших подизображений или установить большую ширину для контейнера.

Я исправил это здесь

Answer 3

Вместо flex-basis попробуйте добавить width.Это позволит сохранить 2 изображения в одну строку.flex-basis с другой стороны, для начального размера изображения.

img.sub1, img.sub2 {
    width: 50%;
    padding: 0;
}