Есть такой html:
<div class="images-set">
<figure>
...
</figure>
<figure>
....
</figure>
<figure>
<p>
<img src="images/desktop/Ic_3.png" alt="">
</p>
<figcaption>
Your money will always be safe
</figcaption>
</figure>
</div>
и css:
Код:
|
.images-set {
display: flex;
flex-direction: row;
justify-content:space-between;
margin-left: 2%;
margin-right: 2%;
}
.images-set figure {
/*width: 30%;*/
flex-basis: 30%;
/*height: 30%;*/
background: #FFFFFF;
border-radius: 28px;
box-shadow: 0 5px 10px 0 rgba(7,8,63,0.50);
text-align: center;
}
.images-set img {
width: 330px;
height: 250px;
}
.images-set figcaption {
display: block;
margin: auto;
width: 80%;
height: 90px;
text-align: center;
padding: 5px 5px 5px 5px;
} |
Квадратные <figure>.
Когда уменьшаю по горизонтали размер браузера,
они превращаются в прямоугольник.
Можно ли средствам flex сделать адаптивные квадраты?