Как на флексах прижать первую строку к левому краю, вторую к правому?
Есть такой блок, сверстанный на флоатах.
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); } |
.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> |
<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); } |
.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> |
<div class="bonuses_block"> <div class="bonus_item">Текст бонуса 1</div> <div class="bonus_item">Текст бонуса 2</div> </div>
Дополнительно:
И зачем здесь флексы?
.bonus_item:last-child { text-align: right; } |
.bonus_item:last-child { text-align: right; }
PS. Фиддл не смотрел, он не открывается в России. Может что и не понял..
без vpn фиддл не работает
ену если блоки нужно двигать а не текст, то
.bonuses_block { display: flex; flex-direction: column; align-items: flex-start; } .bonus_item:nth-child(even) { align-self: flex-end; } |
.bonuses_block { display: flex; flex-direction: column; align-items: flex-start; } .bonus_item:nth-child(even) { align-self: flex-end; }
Или по любому, margin-left: auto
Если флекс оставить row, то суммарная ширина блоков должна быть больше 100%. Можно верхнему задать 100%.
Ну или вариант с text-align из комментария Сергея.
Либо гридами, а не флексами.
В голове не всё компилируется, а jsfiddle не работает в России без vpn ;)
Используйте, например, codepen.io
Ответы:
Можно использовать transform: rotate + translate.
Пример тут:
https://codepen.io/romant094/pen/eYQxPPL
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы прижать первую строку к левому краю, а вторую к правому на флексах, можно воспользоваться свойством justify-content и атрибутом align-self.
Для первой строки (назовем ее "left") нужно задать следующие стили:
.left { align-self: flex-start; margin-right: auto; }
Для второй строки (назовем ее "right") нужно задать следующие стили:
.right { align-self: flex-end; margin-left: auto; }
Полный пример использования флексов:
<div> <div class="left">Первая строка</div> <div class="right">Вторая строка</div> </div>
Таким образом, первая строка будет прижата к левому краю, а вторая - к правому. Не забудьте подключить правильные префиксы для кроссбраузерной поддержки.