Выравнивание flex-элементов (свойство margin) | Flexbox | CSS

Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display контейнера принимает значение flex, его прямые потомки становятся flex-элементами, которые можно выровнять по отношению к родителю и к друг другу с помощью свойств margin, justify-content, align-items, align-content, align-self.

margin

<style>
.raz {
  display: flex;
  background: green;
}
.raz div {
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  background: red;
  margin: 0;

/* или */

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Синтаксис:

/* одно значение */

/*
1em 1em 1em 1em
<‘margin-top’> = <‘margin-right’> = <‘margin-bottom’> = <‘margin-left’>
*/
margin: 1em;

/* два значения */

/*
1em auto 1em auto
<‘margin-top’> = <‘margin-bottom’>
<‘margin-right’> = <‘margin-left’>
*/
margin: 1em auto;

/* три значения */

/*
1em auto 3em auto
<‘margin-right’> = <‘margin-left’>
*/
margin: 1em auto 3em;

/* четыре значения */

/*
1em 2em 3em 4em
*/
margin: 1em 2em 3em 4em;

Свойство margin больше нуля увеличивает коробку элемента

При flex-direction: row; align-items: stretch; длина вдоль поперечной оси у flex-элементов увеличивается, когда у одного из них margin-top и/или margin-bottom больше нуля

<style>
.raz {
  display: flex;
  align-items: stretchflex-startbaselinecenterflex-end;
  background: green;
}
.raz div {
  margin: 01em 0;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  background: red;
  margin: 01em3em 0 2em;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

При flex-direction: row; align-items: stretch; длина вдоль поперечной оси у flex-элемента увеличивается, когда у него одного margin-top и/или margin-bottom меньше нуля

<style>
.raz {
  display: flex;
  align-items: stretchflex-startbaselinecenterflex-end;
  background: green;
}
.raz div {
  margin: 0-1em 0;
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  background: red;
  margin: 0-1em-3em 0 -2em;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

При flex-direction: row; отрицательный margin-left и/или margin-right перемещают flex-элемент, в результате чего тот может выйти за пределы flex-контейнера или быть наложен/подложен на/под соседний flex-элемент

<style>
.raz {
  display: flex;
  background: green;
}
.raz div {
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  background: red;
  margin-right: 02em-2em;
  margin-left: 02em-2em;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Свойство margin не управляет расстоянием между flex-элементами: при переносе flex-элемента на новую строку (у flex-контейнера flex-wrap должен иметь значение wrap или wrap-reverse) отступ margin переносится вместе с ним. Оно очень похоже на прозрачный border. Задача: оставить отступы только между flex-элементами, словно с использованием word-spacing

Фон выглядит как зелёная рамка вокруг каждого блока, как border при border-collapse: collapse; в таблице.

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  padding: 0 0 1em 1em;
  background: green;
}
.raz div {
  flex: 1 1 7em;
  margin: 1em 1em 0 0;
  padding: 1em;
  background: rgb(255, 255, 0);
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Блоки визуально отделены друг от друга и от краёв родителя на равное расстояние.

<style>
.raz {
  display: flex;
  flex-flow: wrap;
  border: 1em solid green;
  padding: 0 0 1em 1em;
}
.raz div {
  flex: 1 1 7em;
  margin: 1em 1em 0 0;
  border: 1em solid green;
  padding: 1em;
  background: rgb(255, 255, 0);
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Блоки отделены друг от друга на равное расстояние, но прижаты к краю родителя.

<style>
.raz {
  overflow: hidden;  /* без него при direction: rtl; появляется горизонтальная полоса прокрутки, которую также можно убрать, если margin-left заменить на margin-inline-start */
}
.raz > div {
  display: flex;
  flex-flow: wrap;
  margin: -1em 0 0 -1em;
}
.raz > div > div {
  flex: 1 1 7em;
  margin: 1em 0 0 1em;
  border: 1em solid green;
  padding: 1em;
  background: rgb(255, 255, 0);
}
</style>

<div class="raz">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

Свойство margin в значении auto занимает всё поначалу доступное пространство родителя

Горизонтальное поначалу свободное пространство делят между собой margin-right и margin-left, вертикальное — margin-top и margin-bottom, в результате чего элемент находится по центру родителя

<style>
.raz {
  display: flex;
  min-height: 5em;
  align-items: stretchflex-startbaselinecenterflex-end;
  background: green;
}
.raz div {
  padding: 1em;
  background: rgb(255, 255, 0);
}
.raz div:nth-child(2) {
  background: red;
  margin: 0auto 0auto 0auto 0auto;
}
</style>

<div class="raz">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Поначалу свободное пространство разделят между собой все элементы, имеющие margin в значении auto

Не схлопывается