flex

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>
.flex-container {
    /* флекс контейнер, а его потомки - флекс-элементы */
    display: flex;
    background-color: #aff1b6;
}

.flex-item {
    /* flex: flex-grow flex-shrink flex-basis; */
    flex: 0 1 auto;
    background-color: #ffcca5;
    padding: 10px;
    margin: 5px;
}

.flex-item::nth-child(3) {
    /* толкаем 3 элемент вправо */
    margin-left: auto;

    /* центрируем элемент */
    margin: auto;
}
1
2
3

align-content

Распределение основных осей вродителе

  • center

  • space-between

  • stretch

.some-class {
    align-content: center;
}

align-items

Выравнивание дочерних элементов по второстепенной оси

.flex-container {
    display: flex;
    align-item: stretch;
    background-color: #aff1b6;
    height: 70px;
}

.flex-item {
    background-color: #ffcca5;
    padding: 10px;
    margin: 5px;
}
  • baseline

1
2
3
  • flex-start - выравнивание по верхнему краю

1
2
3
  • flex-end - выравнивание по нижнему краю

1
2
3
  • center - по центру

1
2
3
  • stretch - по максимальному, по умолчанию

1
2
3

align-self

Выравнивание самого дочернего элемента

  • auto - по умолчанию, как в родительском

  • baseline

  • flex-start - выравнивание по верхнему краю

  • flex-end - выравнивание по нижнему краю

  • center - по центру

  • stretch - по максимальному

.flex-item {
    align-self: auto;
}

flex-basis

Задает минимальную ширину дочернего элемента.

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

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

  • auto - по умолчанию

.flex-item {
    flex-basis: 300px;
}

flex-direction

Направление основной оси

.flex-container {
    display: flex;
    flex-direction: row;
    background-color: #aff1b6;
    height: 70px;
}

.flex-item {
    background-color: #ffcca5;
    padding: 10px;
    width: 30px;
    height: 30px;
    margin: 5px;
}
  • column - сверху вних

1
2
3
  • column-reverse - снизу вверх

1
2
3
  • row - по умолчанию, слева направо

1
2
3
  • row-reverse - справа налево

1
2
3

flex-flow

.flex-container {
    display: flex;
    flex-flow: column;
    background-color: #aff1b6;
    height: 70px;

}

.flex-item {
    background-color: #ffcca5;
    padding: 10px;
    width: 30px;
    height: 30px;
    margin: 5px;
}
  • column

1
2
3

flex-grow

Степень жадности элемента

Если значение отличное от 0, то по ширине элемент займет все пустое пространство по главной оси.

  • 0 - по умолчанию, элемент не жадный

.flex-item {
    flex-grow: 0;
}
1
2
1

flex-shrink

Степень/скорость сжимаемости элемента

  • 0 - элемент не сжимаемый

  • 1 - по умолчанию, элемент сжимаемый

.flex-item {
    flex-shrink: 1;
}

flex-wrap

Перенос элементов в элементе

  • no-wrap - по умолчанию, не переносить

  • wrap - переносить

  • wrap-reverse

.flex-container {
    flex-wrap: wrap;
}

justify-content

Заполнение оси

.flex-container {
    flex-direction: row;
    background-color: #aff1b6;
    height: 70px;
    justify-content: flex-end;
}

.flex-item {
    background-color: #ffcca5;
    padding: 10px;
    width: 30px;
    height: 30px;
    margin: 5px;
}
  • flex-end - относительно конца

1
2
3
  • flex-start - относительно начала

1
2
3
  • center - от центра

1
2
3
  • space-around - растягивает по оси, оставляя равные промежутки между элементами

1
2
3
  • space-between - растягивает по оси, оставляя равные промежутки между элементами

1
2
3

order

Задает порядковый номер элементу по флекс контейнере

.flex-item {
    order: -1;
}