#html #css #flexbox #grid
#HTML #css #flexbox #сетка
Вопрос:
Привет, в настоящее время я пытаюсь отобразить свои карточки так, чтобы в каждой строке было по 3, и всякий раз, когда их становится больше, они переносятся в следующую строку. Я установил свой flex так, чтобы его было 3 в каждой строке, но, похоже, он не работает.
Во-вторых, кажется, я не могу определить размер карты, поэтому изображение делает карту слишком большой. Как я могу это исправить?
Наконец, как бы мне настроить это так, чтобы строка карточек располагалась по центру в середине страницы (а не начиналась слева)?
.products {
display:flex;
flex-wrap: wrap;
width:80%;
margin: 0 auto;
}
.product-card{
flex: 1 30%;
flex-grow: 1;
padding-right: 5px;
border: 2px solid black;
}
.product-image img {
max-width: 100%;
}
.product-info h5{
margin-top: auto;
font-family: Helvetica;
font-style: normal;
font-weight: bold;
line-height: 120.2%;
padding-top: 2%;
/* or 29px */
color: #363636;
}
.product-info h6{
font-family: Helvetica;
font-style: normal;
font-weight: normal;
line-height: 120.2%;
/* or 28px */
color: #363636;
} <section class='products'>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
</section> Комментарии:
1. Не хочу вас огорчать, но мы не видим изображений.
2. Обновлено изображениями!
Ответ №1:
Вы добавляете flex в .product-card div, но <a> элемент является фактическим дочерним элементом, к которому вы хотите добавить flex .
.products {
display:flex;
flex-wrap: wrap;
width:80%;
margin: 0 auto;
}
a {
display: block;
box-sizing: border-box;
flex: 33.3%;
border: 1px solid black;
padding: 5px;
}
.product-image img {
max-width: 100%;
}
.product-info h5{
margin-top: auto;
font-family: Helvetica;
font-style: normal;
font-weight: bold;
line-height: 120.2%;
padding-top: 2%;
/* or 29px */
color: #363636;
}
.product-info h6{
font-family: Helvetica;
font-style: normal;
font-weight: normal;
line-height: 120.2%;
/* or 28px */
color: #363636;
} <section class='products'>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
</section>