Join Stack Overflow to find the best answer to your technical question, help others answer theirs.

.flexbox {
  background-color: #ace;
  border: 3px solid orange;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  width: 800px;
}

.container {
  flex: 0 1 25%;
  margin: 0;
  max-width: 25%;
}

img.full-width {
  width: 100%
}

<div class="flexbox">
  <div class="container">
    <img class="full-width" src="https://picsum.photos/300/200" />
  </div>
  <div class="container">
    <img class="full-width" src="https://picsum.photos/300/200" />
  </div>
  <div class="container">
    <img class="full-width" src="https://picsum.photos/300/200" />
  </div>
  <div class="container">
    <img class="full-width" src="https://picsum.photos/300/200" />
  </div>
</div>

Return to post