0

Если в ряду 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>

1
  • Была похожая проблема, решил не мучатся и написать все на гридах (display: grid). Можно задать любую сетку и расположить элементы как удобно.
    – Evgenii
    24 мая 2022 в 11:35

1 ответ 1

0

Как вариант:

  1. Добавить к блоку .payment-methods__form с кнопками дополнительный класс, например, .buttons

  2. использовать для него псевдокласс, который будет действовать тогда и только тогда, когда этот блок будет вторым (т.е., в случае, когда у вас всего одна карта):

    .buttons {min-width:100%; /* и прочие стили для блока с кнопками когда карт больше 1*/}

    и

    .buttons:nth-of-type(2) {min-width:unset; /* и прочие стили для блока, когда карта всего одна*/}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.