Если в ряду 2 и более карточек, то кнопки должны переместиться на новый ряд? если 1 карточка в ряду, то карточка и кнопки должны быть прибиты по разным бокам. Как можно в новом ряду кнопки прибить в левую сторону?
https://i.stack.imgur.com/wD0g0.png https://i.stack.imgur.com/czpx2.png
https://jsfiddle.net/3gbutfye/49/
.payment-methods__container {
margin: 0 auto;
max-width: 1400px;
}
.payment-methods__body {
display: flex;
flex-wrap: wrap;
}
.payment-methods__form {
flex: 0 1 33.3333%;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0px 0px 10px 0px;
}
.payment-methods__form:last-child{
flex: 0 1 66.6667%;
justify-content: flex-end;
}
.payment-methods__checked {
width: 100%;
border: 1px solid #000000;
padding: 20px;
display: flex;
text-align: center;
}
.payment-methods__buttons {
display: flex;
flex-wrap: nowrap;
}
.payment-methods__button-pay {
display: flex;
align-items: center;
justify-content: center;
width: 369px;
height: 50px;
background: #363c43;
border-radius: 7px;
font-weight: 300;
font-size: 28px;
line-height: math.div(33, 28);
text-align: center;
color: #ffffff;
margin: 0px 20px 0px 0px;
}
.payment-methods__button-send {
background: #fd9d08;
border-radius: 7px;
width: 300px;
border-radius: 7px;
font-weight: 300;
font-size: 28px;
height: 50px;
line-height: math.div(33, 28);
text-align: center;
color: #ffffff;
}
<div class="payment-methods__container">
<div class="payment-methods__body">
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__checked">
карты
</div>
</div>
<div class="payment-methods__form">
<div class="payment-methods__buttons">
<a href="#" class="payment-methods__button-pay">Оплатить позже</a>
<button type="submit" class="payment-methods__button-send">Отправить</button>
</div>
</div>
</div>
</div>
display: grid
). Можно задать любую сетку и расположить элементы как удобно.