9.2 KiB

Raw Blame History

title	localeTitle
CSS Flexbox Tips and Tricks	Советы и хитрости CSS Flexbox

CSS Flexbox

CSS Flexbox позволяет нам легко форматировать наш HTML-код, как вы никогда не знали, что это возможно. С flexbox можно легко выровнять по вертикали и по горизонтали. Как звук этого? Да, я тоже.

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

Flexbox

Ниже приведен список свойств flexbox, которые можно использовать для размещения элементов в css:

CSS, который может быть применен к контейнеру

display: flexbox | inline-flex; 
 flex-direction: row | row-reverse | column | column-reverse; 
 flex-wrap: nowrap | wrap | wrap-reverse; 
 flex-flow: <'flex-direction'> || <'flex-wrap'> 
 justify-content: flex-start | flex-end | center | space-between | space-around; 
 align-items: flex-start | flex-end | center | baseline | stretch; 
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, который может быть применен к элементам / элементам в контейнере

order: <integer>; 
 flex-grow: <number>; /* default 0 */ 
 flex-shrink: <number>; /* default 1 */ 
 flex-basis: <length> | auto; /* default auto */ 
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
 align-self: auto | flex-start | flex-end | center | baseline | stretch;

Итак, теперь у вас есть свой инструментарий, но вы спрашиваете: «Что мне делать с моими инструментами, как я могу их использовать?», Позвольте мне показать вам.

Дисплей Flex

display: flex; это просто сказать вашему браузеру, эй, я бы хотел использовать flexbox с этим контейнером, пожалуйста. Это будет инициализировать это поле как контейнер гибких дисков и применить некоторые свойства flex по умолчанию.

Вот что выглядит контейнер без display: flex;

После добавления display: flex; мы получаем ниже, применяются свойства flex по умолчанию, заставляющие его показывать как таковые

Направление Flex

flex-direction: позволяет нам контролировать, как отображаются элементы в контейнере, вы хотите, чтобы они оставались вправо, справа налево, сверху вниз или снизу вверх? вы можете сделать все это легко, установив направление гибкости контейнера.

Flexbox применяет строку по умолчанию для направления. Вот как они выглядят так:

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Flex Wrap

Flexbox по умолчанию будет пытаться поместить все элементы в одну строку, но вы можете изменить это с помощью свойства flex-wrap, это позволяет вам установить, будут ли элементы перетекать или нет, есть три свойства для flex-wrap:

flex-wrap: nowrap это значение по умолчанию и будет выглядеть как угодно в одной строке слева направо.

flex-wrap: wrap это позволит элементам продолжать создавать несколько строк и слева направо.

flex-wrap: wrap-reverse позволяет элементам находиться на нескольких строках, но на этот раз отображается справа налево.

Flex Flow

Flex-поток сочетает использование flex-wrap и flex-direction в одном свойстве, он используется, сначала устанавливая направление, а затем обертывание.

flex-flow: column wrap; является примером, как использовать это.

Обосновать контент

justify-content - свойство aa для выравнивания элементов в контейнере вдоль основной оси (это изменяется в зависимости от того, как отображается содержимое). Для этого есть несколько вариантов, и это позволяет нам заполнять любое пустое пространство в строках, но определять, как мы хотим «оправдать» его.

Вот наши варианты, когда мы оправдываем наш контент flex-start | flex-end | center | space-between | space-around; ,

Выровнять элементы

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

align-items: flex-start | flex-end | center | baseline | stretch;

Выровнять содержимое

Это для выравнивания элементов с несколькими строками, для выравнивания на поперечной оси и не будет влиять на контент, который является одной строкой.