Перенос картинок на другую строку
Мне нужно что бы картинка переносилась на другую строку
.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>
