Показать сообщение отдельно
  #1 (permalink)  
Старый 25.02.2021, 20:34
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 409

Адаптивные квадраты (Flex)
Есть такой 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 сделать адаптивные квадраты?
Ответить с цитированием