Шпаргалка по Flexbox CSS

display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Применяется ко: всем элементам.

     flex
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
     inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

FLEX

INLINE-FLEX

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: inline-flex;
}

Результат

Здесь текст
1
2
3
4

flex-direction

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

     row
Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
     row-reverse
Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
     column
Главная ось располагается вертикально и направлена сверху вниз.
     column-reverse
Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

ROW

ROW-REVERSE

COLUMN

COLUMN-REVERSE

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: row;
  height: 100%;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}

Результат

Здесь текст
1
2
3
4

flex-wrap

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

     nowrap
Флексы выстраиваются в одну линию.
     wrap
Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
     wrap-reverse
Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

NOWRAP

WRAP

WRAP-REVERSE

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  height: 100%;
}
.child {
  width: 40%;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}
.child {
  width: 40%;
}

Результат

Здесь текст
1
2
3
4

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

CSS

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  height: 100%;
}
.child {
  width: 40%;
}

Результат

Здесь текст
1
2
3
4