Создайте ряд больших изображений, подходящих для flexbox

Question

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  flex: 1;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

Я хочу отобразить, например, 5 изображений большого размера подряд внутри flexbox. Я хочу, чтобы все изображения шириной соответствовали текущему экрану, а не обтекали внизу. Я пробовал разные комбинации flex: 1, width: 100% тега img, но ничего из этого не сработало ...

Answer 1

Взято из этого ответа о том, почему изображения не меняются в макете флексбокса:

Начальная настройка для элементов Flex - минимальная ширина: авто. Это означает, что гибкий элемент по умолчанию не может сжиматься ниже размера его содержимого.

Это означает, что изображение не будет сжиматься, если ему не присвоена ширина. Чтобы обойти это, вы можете обернуть ваше изображение в div (который будет уменьшаться, чтобы заполнить гибкий контейнер), а затем придать изображению ширину 100%

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  display: block;
  width: 100%;
}

<div class="d1">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
</div>

Answer 2

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

.scroll-wrap { border: 5px solid lightblue; width: 100%; overflow: auto;}
.d1 {display: flex; width: 500%;}
.d1 img{width: 20%;}

<div class="scroll-wrap">
  <div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

Answer 3

Вам нужно обосновать содержимое контейнера. Затем вы можете установить гибкую основу для изображений. Я использовал space-between здесь, но любое из других значений будет работать.

.d1 {
  display: flex;
  border: 5px solid black;
  justify-content: space-between;
}

img {
  flex: 0 0 20%;
  width: 20%;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

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