Flexbox (флексбокс) предназначен для вёрстки гибких макетов. Ежели свойство display
контейнера принимает значение flex
, его прямые потомки становятся flex-элементами, которые можно выровнять по отношению к родителю и к друг другу с помощью свойств margin
, justify-content
, align-items
, align-content
, align-self
.
margin
1 2 3 | ||
сверху
справа снизу слева | ||
0
| ||
наследует значение родителя | ||
0 |
<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
больше нуля
margin:
align-items:
align-items:
1
2
3
<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
меньше нуля
margin:
align-items:
align-items:
1
2
3
<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-элемент
margin:
1
2
3
<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;
в таблице.
1
2
3
<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>
Блоки визуально отделены друг от друга и от краёв родителя на равное расстояние.
1
2
3
<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>
Блоки отделены друг от друга на равное расстояние, но прижаты к краю родителя.
1
2
3
<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
, в результате чего элемент находится по центру родителя
align-items:
1
2
3
<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>
Комментариев нет: