Images aren't moving to next line when resizing window

July 29, 2022

I have a div containing some images. I want my images to move to next line when images don’t fit within the screen size. But, images just get cut off, they don’t break to next line!

html

<div class="cd">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
      </div>

css

.cd {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-bottom: 5em;
}

.cd img {
  flex: 1;
  max-width: 100%;
  height: auto;
  max-height: 310px;
}

What am I doing wrong?

>Solution :

You have set the flex-wrap property to nowrap. Simply change to wrap and flex will take care to take everything to the next row if it does not fit the current one.

.cd {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 5em;
}

.cd img {
  flex: 1;
  max-width: 100%;
  height: auto;
  max-height: 310px;
}

<div class="cd">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
        <img src="https://mariongrandvincent.github.io/HTML-Personal-website/img-codePen/slider-logo1.png">
      </div>