Перенос картинок на другую строку

Мне нужно что бы картинка переносилась на другую строку

.card {
  border-radius: 8%;
  width: 250px;
  height: 200px;
  overflow: hidden;
  margin: 10px;
  background-color: #131313;
}

.card img {
  width: initial;
  height: 100%;
}

.header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.header-row span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-row span>.card {
  margin: auto;
}

.header-row span img {
  height: auto;
}
<div class="container">
  <header class="header-row">
    <span>
                    <div class="card">
                        <img src="https://apod.nasa.gov/apod/image/2209/TulipCygX-1_1024.jpg" alt="The Tulip and Cygnus X-1" class="card-img-top">
                    </div>
                </span>

    <span>
                    <div class="card">
                        <img src="https://apod.nasa.gov/apod/image/2209/m51_l2_1024.jpg" alt="M51: The Whirlpool Galaxy" class="card-img-top">
                    </div>
                </span>

    <span>
                    <div class="card">
                        <img src="https://apod.nasa.gov/apod/image/2209/Interval29seconds_Transit1200.jpg" alt="Sun and Moon and ISS" class="card-img-top">
                    </div>
                </span>

    <span>
                    <div class="card">
                        <img src="https://apod.nasa.gov/apod/image/2209/MilkyWayOregon_Montoya_960.jpg" alt="Sea and Sky Glows over the Oregon Coast" class="card-img-top">
                    </div>
                </span>
  </header>
</div>

Вот как это выглядит: введите сюда описание изображения


Ответы (1 шт):

Автор решения: Oliver Patterson

Воспользуйтесь flex-wrap: wrap для .header-row:

.card {
  border-radius: 8%;
  width: 250px;
  height: 200px;
  overflow: hidden;
  margin: 10px;
  background-color: #131313;
}

.card img {
  width: initial;
  height: 100%;
}

.header-row {
  display: flex;
  flex-wrap: wrap; /* add */
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.header-row span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-row span>.card {
  margin: auto;
}

.header-row span img {
  height: auto;
}
<div class="container">
    <header class="header-row">
        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/TulipCygX-1_1024.jpg"
                      alt="The Tulip and Cygnus X-1"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/m51_l2_1024.jpg"
                      alt="M51: The Whirlpool Galaxy"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/Interval29seconds_Transit1200.jpg"
                      alt="Sun and Moon and ISS"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/MilkyWayOregon_Montoya_960.jpg"
                      alt="Sea and Sky Glows over the Oregon Coast"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/MilkyWayOregon_Montoya_960.jpg"
                      alt="Sea and Sky Glows over the Oregon Coast"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/MilkyWayOregon_Montoya_960.jpg"
                      alt="Sea and Sky Glows over the Oregon Coast"
                      class="card-img-top">
            </div>
        </span>

        <span>
            <div class="card">
                <img src="https://apod.nasa.gov/apod/image/2209/MilkyWayOregon_Montoya_960.jpg"
                      alt="Sea and Sky Glows over the Oregon Coast"
                      class="card-img-top">
            </div>
        </span>
    </header>
</div>

→ Ссылка