Как выровнять последней элемент с первым по flex

Question

Как сделать, чтобы нижний блок был таких же размеров как и верхние блоки, у меня сейчас получается, что когда постепенно размер экрана сужается блок который внизу он становится других размеров, и смотрится не красиво, а как сделать чтобы он всегда был такого же размера как и верхний левый блок. Пыталась поиграть lastChild, но не выходит

.container{
    max-width: 1046px;
    height: 1203px;
    margin: 0 auto;
    background-color: rgb(113, 112, 115);

}

.cards{
    display: flex;
   
}

@media (max-width:800px){
    .cards{
        flex-wrap: wrap;
        
    }

}

.card__service{
    margin: 0 15px;
    height: 200px;
    background-color: rgb(71, 100, 122);
    flex: 1 1 33.333%; 
    
}

@media (max-width:800px){
    .card__service{
margin-bottom: 15px;
flex: 1 1 33%; 
   
    }

    .card__service:last-child{
        flex: 0 0 33%;
        margin-bottom: 15px;
     
           
            }

  

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="cards">
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>





    </div>
</div>

</body>

</html>

Answer 1

Воспользуйтесь гридами.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  grid-gap: 15px;
}


.card__service{    
    height: 200px;
    background-color: rgb(71, 100, 122);    
}

 <div class="container">
    <div class="cards">
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
    </div>
</div>

Answer 2

На флексах вот так можно:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container {
            max-width: 1046px;
            height: 1203px;
            margin: 0 auto;
            background-color: rgb(113, 112, 115);
        }
    
        .cards{
            display: flex;
        }
        
        @media (max-width:800px){
            .cards{
                flex-wrap: wrap;
            }
        
        }
        
        .card__service{
            margin: 0 1%;
            width: 31.333%;
            height: 200px;
            background-color: rgb(71, 100, 122);
        }
        
        @media (max-width:800px){
            .card__service{
                width: 48%;
                margin-bottom: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cards">
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
        <div class="card__service">
            <div class="card__service__text">Тестовая карточка</div>
        </div>
    </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Как выровнять последней элемент с первым по flex

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