Flex

Чтобы использовать особые свойства флексов (от английского flexible — «гибкий»), нужно с помощью display изменить тип элемента:

display: flex;

Бокс с типом flex называют флекс-контейнером, а его дочерние боксы — флекс-элементами.

Флекс-элементы автоматически выстраиваются вдоль главной оси. По умолчанию она направлена слева направо.

По умолчанию флекс-элементы не переносятся на новую строку и ужимаются до содержимого. Из-за этих особенностей сеточным флекс-элементам лучше всегда явно прописывать ширину.

По умолчанию все флекс-элементы имеют одинаковую высоту, подстраиваясь под самый высокий элемент в ряду. Самый простой способ выровнять отдельный элемент по нижней границе — добавить ему автоматический внешний отступ сверху. В этом случае флекс-элемент уменьшит свою высоту под содержимое и прижмётся к низу родительского контейнера.

Свойство justify-content

justify-content — свойство флекс-контейнера, которое говорит, как расположить флекс-элементы на главной оси.

У него может быть несколько значений:

• flex-start — флекс-элементы располагаются в начале главной оси (по умолчанию — слева);
• flex-end — флекс-элементы располагаются в конце главной оси (по умолчанию — справа);
• center — флекс-элементы располагаются в центре главной оси;
• space-around — свободное пространство распределяется вокруг флекс-элементов;
• space-between — свободное пространство распределяется между флекс-элементами, при этом первый и последний элемент прижимаются к краям флекс-контейнера.

Свойство width

Чтобы указать ширину элемента, используют свойство width:

width: 550px;

По умолчанию свойство width задаёт ширину содержимого бокса (content) и не учитывает внутренние отступы и ширину рамки.

.box {
  width: 100px;
  padding-left: 20px;
  padding-right: 30px;
  border: 5px solid black;
}

В этом случае полная ширина бокса окажется 160px, потому что ширина содержимого сложится с шириной отступов и рамок: 100px + 20px + 30px + 5px + 5px (рамка справа и слева).

Выравнивание по центру

В вёрстке часто требуется расположить элемент по центру, или, как говорят разработчики, отцентровать элемент. Для этого требуется:

• указать элементу ширину, которая меньше ширины родительского элемента;
• задать элементу автоматические внешние отступы справа и слева.

.element {
  width: 550px;
  margin-right: auto;
  margin-left: auto;
}

Это удобный трюк, но работает он с оговорками. Во-первых, таким образом не получится выровнять строчные боксы. Во-вторых, в блочном боксе (в отличие от флекс-контейнера) подобным образом можно выровнять элемент только по горизонтали.

Автоматические внешние отступы

У margin может быть значение auto. Например:

margin-left: auto;

Это значение говорит браузеру самому рассчитать размер внешнего отступа. Браузер выделяет под отступ всё свободное пространство в родительском контейнере. Так что если указать автоматический внешний отступ слева, то элемент прижмётся к правой границе родительского элемента.

Если автоматические внешние отступы заданы и справа и слева, то свободное пространство поделится между ними поровну. В итоге элемент расположится прямо по центру.

В блочном боксе автоматические внешние отступы сверху и снизу работают так же, как если бы их сделали равными 0. Но во флекс-контейнере они позволяют сдвинуть флекс-элемент к верхней или нижней границе. Или даже отцентровать элемент по вертикали, если задать верхний и нижний отступ одновременно.

Если указать для margin два значения, то первое применится к внешним отступам по вертикали, а второе — к внешним отступам по горизонтали.

margin: 0 auto;

Краткую запись с двумя значениями часто используют, когда требуется отцентровать элемент. Однако в других ситуациях лучше к ней не прибегать, так как это ухудшает читаемость кода.