Как на флексах прижать первую строку к левому краю, вторую к правому?

Question

[ymfront]

Есть такой блок, сверстанный на флоатах.

https://jsfiddle.net/8907pbdo/

.bonuses_block {
    display: block;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  max-width: 300px;
  border: 1px solid #000;
}

.bonuses_block:after {
    display: block;
    content: "";
    clear: both;
}

.bonuses_block .bonus_item {
    padding: 6px 10px;
    font-size: 24px;
}

.bonuses_block .bonus_item:first-child {
    float: left;
    margin: 0;
  background: #ffb800;
    box-shadow: 0 0 10rem 0 rgba(255,184,1,0.6);
    transform: rotate(-7deg);
}

.bonuses_block .bonus_item:last-child {
    float: right;
    margin: 0;
  background: #ff4a00;
    box-shadow: 0 0 10rem 0 rgba(255,74,0,0.6);
    transform: rotate(6.5deg);
}

<div class="bonuses_block">
    <div class="bonus_item">Текст бонуса 1</div>
    <div class="bonus_item">Текст бонуса 2</div>
</div>

Как этот блок сверстать на флексах, чтобы был такой же эффект? Чтобы верхняя строка прижималась к левому краю, нижняя - к правому.

Пытаюсь сделать так, но не пойму, как нижнюю строку прижать к правому краю.

https://jsfiddle.net/4d3nu87f/

.bonuses_block {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
      margin: 0 auto;
      padding: 10px;
      width: 100%;
      max-width: 300px;
      border: 1px solid #000;
    }

    .bonuses_block .bonus_item {
        padding: 6px 10px;
        font-size: 24px;
    }

    .bonuses_block .bonus_item:first-child {
      background: #ffb800;
        box-shadow: 0 0 10rem 0 rgba(255,184,1,0.6);
        transform: rotate(-7deg);
    }

    .bonuses_block .bonus_item:last-child {
      background: #ff4a00;
        box-shadow: 0 0 10rem 0 rgba(255,74,0,0.6);
        transform: rotate(6.5deg);
    }

<div class="bonuses_block">
    <div class="bonus_item">Текст бонуса 1</div>
    <div class="bonus_item">Текст бонуса 2</div>
</div>

Comments

[Сергей delphinpro]

И зачем здесь флексы?

.bonus_item:last-child {
  text-align: right;
}

PS. Фиддл не смотрел, он не открывается в России. Может что и не понял..

[ymfront]

Сергей delphinpro, вы скорее всего неправильно поняли задачу) Как выравнивание тексты сдвинет див вправо? И фиддл в России у меня работает.

[Сергей delphinpro]

ymfront,

без vpn фиддл не работает

ену если блоки нужно двигать а не текст, то

.bonuses_block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bonus_item:nth-child(even) {
  align-self: flex-end;
}

[Ankhena]

Если флекс колонками, то align-self: flex-end;
Или по любому, margin-left: auto
Если флекс оставить row, то суммарная ширина блоков должна быть больше 100%. Можно верхнему задать 100%.

Ну или вариант с text-align из комментария Сергея.

Либо гридами, а не флексами.

В голове не всё компилируется, а jsfiddle не работает в России без vpn ;)
Используйте, например, codepen.io

Answer 1

[Антон Романков]

Можно использовать transform: rotate + translate.
Пример тут:
https://codepen.io/romant094/pen/eYQxPPL