Flexbox: выравнивание одного элемента на главной оси по краю контейнера

359
10 июля 2017, 16:57

Как во флексбоксах оторвать один крайний элемент от группы элементов, выровненных justify-content-ом по центру главной оси, и прилепить к правому или левому краю контейнера?

К примеру:

.wrapper { 
  border: 5px solid blue; 
  height: 150px; 
  display: flex; 
  justify-content: center; 
  
} 
 
.block1, .block2, .block3 { 
  border: 5px solid red; 
  margin: 0 3%; 
}
<div class="wrapper"> 
  <div class="block1">Блок1</div> 
  <div class="block2">Блок2</div> 
  <div class="block3">Блок3</div> 
</div>

Как блок1 прижать к левой стороне, или блок3 к правой, но чтобы остальные два остались в центре? Margin не важен, я написал лишь чтобы впритык не были.

Answer 1

Получилось решить с блочной абсолютной вёрсткой 

* { 
  box-sizing: border-box 
} 
 
.wrapper { 
  border: 5px solid blue; 
  height: 150px; 
  display: flex; 
  justify-content: center; 
  position: relative; 
} 
 
.block1, 
.block2, 
.block3 { 
  border: 5px solid red; 
  margin: 0 3%; 
} 
 
.block3 { 
  position: absolute; 
  right: 0; 
  height: 100%; 
}
<div class="wrapper"> 
  <div class="block1">Блок1</div> 
  <div class="block2">Блок2</div> 
  <div class="block3">Блок3</div> 
</div>

READ ALSO
Адаптивная верстка psd
CSS

Адаптивная верстка psd

Всем привет! Возник вопросПытаюсь расположить несколько элементов с помощью Masonry/flex и сделать так чтобы они адаптивно вели себя

 357
Бинарный лог MySQL
MySQL

Бинарный лог MySQL

Не могу включить бинарный логНашел в интернете что бинарный лог можно включить раскомментировав строку log_bin = /var/log/mysql/mysql-bin

 298
Выборка MySql (многие ко многим)
MySQL

Выборка MySql (многие ко многим)

Есть такая таблица:

 338
Конструкция if then else mysql
MySQL

Конструкция if then else mysql

Как правильно написать запрос

 363