Шпаргалка по FlexBox

Шпаргалка по FlexBox CSS. Помогает не путаться в свойствах и значениях для адаптивного размещения элементов по горизонтали или вертикали.

Все значения доступны на странице CSS Flex.

Сначала убедитесь что ваш браузер поддерживает FlexBox

Таблица поддержки браузерами: “CSS Flexible Box

Свойства FlexBox

JavaScript: object.style.свойство="значение"
Свойства и значения FlexBox
Flexible Box Layout Module для адаптивного размещения элементов
flex-basis
для ширины дочерних элементов, равномерно уменьшает свободное пространство
1
2
3
<div class="flex-basis">
  <div class="item-basis">1</div>
  <div class="item-basis">2</div>
  <div class="item-basis">3</div>
</div>
.flex-basis {
    display: flex;
}
.item-basis:nth-child(1) {
	background: Moccasin;
	flex-basis: 20%;
}
.item-basis:nth-child(2) {
	background:LightSkyBlue;
	flex-basis: 60%;
}
.item-basis:nth-child(3) {
	background: Moccasin;
	flex-basis: 20%;
}
flex-grow
указывает ширину свободного пространства относительно других дочерних элементов
1
2
3
<div class="flex-grow">
  <div class="item-grow">1</div>
  <div class="item-grow">2</div>
  <div class="item-grow">3</div>
</div>
.flex-grow {
   display: flex;
}
.item-grow:nth-child(1)  {
   width: 50px;
   background: Moccasin;
   flex-grow: 1;
}
.item-grow:nth-child(2)  {
   width: 50px;
   background:LightSkyBlue;
   flex-grow: 5;
}
.item-grow:nth-child(3)  {
   width: 50px;
   background: Moccasin;
   flex-grow: 10;
}
flex-shrink
указывает насколько сильнее будет уменьшаться ширина относительно других дочерних элементов
1
2
3
<div class="flex-shrink">
  <div class="item-shrink">1</div>
  <div class="item-shrink">2</div>
  <div class="item-shrink">3</div>
</div>
.flex-shrink {
	display: flex;
}
.item-shrink:nth-child(1) {
   width: 120px;
   background: Moccasin;
   flex-shrink: 20;
}
.item-shrink:nth-child(2) {
   width: 120px;
   background:LightSkyBlue;
   flex-shrink: 5;
}
.item-shrink:nth-child(3) {
   width: 120px;
   background: Moccasin;
}
flex
сокращает свойства flex-basis, flex-grow и flex-shrink для изменения первоначального размера
1
2
3
<div class="conteiner-flex">
  <div class="item-flex">1</div>
  <div class="item-flex">2</div>
  <div class="item-flex">3</div>
</div>
.conteiner-flex {
   display: flex;
   border: 1px solid #949494;		
} 
.item-flex:nth-child(1) {
   background: Moccasin;
   flex: 1 1 15%;
}
.item-flex:nth-child(2) {
   background:LightSkyBlue;
   flex: 2 1 60%;
}
.item-flex:nth-child(3) {
   width: 100px;
   background: Moccasin;
   flex: auto;
}
align-items
выравнивает дочерние элементы контейнера с одинаковым отступом или без. Для этого контейнеру display: flex; нужно добавить свойство flex-direction: значение;
1
2
3
<div class="align-items">
  <div class="item-align">1</div>
  <div class="item-align">2</div>
  <div class="item-align">3</div>
</div>
.align-items {
   height: 100px;
   border: 1px solid #949494;
   display: flex;
   flex-direction: row;
   align-items: center;
}
.item-align:nth-child(1) {
   background: Moccasin;
   width: 100px;
}
.item-align:nth-child(2) {
   background:LightSkyBlue;
   width: 100px;
}
.item-align:nth-child(3) {
   background: Moccasin;
   width: 100px;
}
flex-direction
указывает направление дочерним элементам

Значение row расположит элементы слева вверху.

1
2
3
<div class="flex-direction-row">
  <div class="item-direction-row">1</div>
  <div class="item-direction-row">2</div>
  <div class="item-direction-row">3</div>
</div>
.flex-direction-row {
   height: 170px;
   border: solid 1px DimGray;
   display: flex;
   flex-direction: row;
}
.item-direction-row:nth-child(1) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}
.item-direction-row:nth-child(2) {
   background:LightSkyBlue;
   width: 100px;
   height: 50px;
}
.item-direction-row:nth-child(3) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}

Значение row-reverse расположит элементы справа вверху, потоком справа налево. Можно для значения row добавить direction: rtl; будет тоже самое.

1
2
3
<div class="flex-direction-row-reverse">
  <div class="item-direction-row-reverse">1</div>
  <div class="item-direction-row-reverse">2</div>
  <div class="item-direction-row-reverse">3</div>
</div>
.flex-direction-row-reverse {
   height: 170px;
   border: solid 1px DimGray;
   display: flex;
   flex-direction: row-reverse;
}
.item-direction-row-reverse:nth-child(1) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}
.item-direction-row-reverse:nth-child(2) {
   background:LightSkyBlue;
   width: 100px;
   height: 50px;
}
.item-direction-row-reverse:nth-child(3) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}

Значение column расположит элементы слева вверху, потоком сверху вниз.

1
2
3
<div class="flex-direction-column">
  <div class="item-direction-column">1</div>
  <div class="item-direction-column">2</div>
  <div class="item-direction-column">3</div>
</div>
.flex-direction-column {
   height: 170px;
   border: solid 1px DimGray;
   display: flex;
   flex-direction: column;
}
.item-direction-column:nth-child(1) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}
.item-direction-column:nth-child(2) {
   background:LightSkyBlue;
   width: 100px;
   height: 50px;
}
.item-direction-column:nth-child(3) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}

Значение column-reverse расположит элементы слева внизу, потоком снизу-вверх.

1
2
3
<div class="flex-direction-column-reverse">
  <div class="item-direction-column-reverse">1</div>
  <div class="item-direction-column-reverse">2</div>
  <div class="item-direction-column-reverse">3</div>
</div>
.flex-direction-column-reverse {
   height: 170px;
   border: solid 1px DimGray;
   display: flex;
   flex-direction: column-reverse;
}
.item-direction-column-reverse:nth-child(1) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}
.item-direction-column-reverse:nth-child(2) {
   background:LightSkyBlue;
   width: 100px;
   height: 50px;
}
.item-direction-column-reverse:nth-child(3) {
   background: Moccasin;
   width: 100px;
   height: 50px;
}
flex-flow
сокращение flex-direction; и flex-wrap;

Значение row wrap-reverse при переполнении контейнера расположит элемент вверху слева.

1
2
3
4
<div class="flex-flow-row-wrap-reverse">
  <div class="item-row-wrap-reverse">1</div>
  <div class="item-row-wrap-reverse">2</div>
  <div class="item-row-wrap-reverse">3</div>
  <div class="item-row-wrap-reverse">4</div>
</div>
.flex-flow-row-wrap-reverse {
   width: 150px;
   border: solid 1px DimGray;
   display: flex;
   flex-flow: row wrap-reverse;
}
.item-row-wrap-reverse:nth-child(odd) {
   background: Moccasin;
}
.item-row-wrap-reverse {
   width: 50px;
   background:LightSkyBlue;
}
align-self
значение stretch заполнит всю допустимую область элементом по высоте. Для этого контейнеру display: flex; нужно добавить свойство align-items: значение;
1
2
3
<div class="flex-align-self">
  <div class="item-align-self">1</div>
  <div class="item-align-self">2</div>
  <div class="item-align-self">3</div>
</div>
.flex-align-self {
   height: 100px;
   border: solid 1px DimGray;
   display: flex;  
   align-items: flex-start;
} 

.item-align-self:nth-child(1) {
   width: 50px;
   background: Moccasin;
   align-self: stretch;
}

.item-align-self:nth-child(2) {
   width: 50px;
   background:LightSkyBlue;
}
	
.item-align-self:nth-child(3) {
   width: 50px;
   background: Moccasin;
}
align-content
выравнивает дочерние элементы, если для контейнера добавить flex-flow: значение;. Направление можно указать свойством flex-direction: значение;
1
2
3
4
5
6
<div class="flex-align-content">
  <div class="item-align-content">1</div>
  <div class="item-align-content">2</div>
  <div class="item-align-content">3</div>
  <div class="item-align-content">4</div>
  <div class="item-align-content">5</div>
  <div class="item-align-content">6</div>
</div>
.flex-align-content {
   height: 200px;
   width: 400px;
   border: solid 1px DimGray;
   display: flex;
   flex-flow: row wrap;
   align-content: space-around;	
   flex-direction: column;
}
.item-align-content:nth-child(odd) {
   background:LightSkyBlue;
}	
.item-align-content {
   width: 120px;
   height: 50px;
   background: Moccasin;
}
order
указывает порядок для дочерних элементов
1
2
3
<div class="flex-order">
  <div class="item-order">1</div>
  <div class="item-order">2</div>
  <div class="item-order">3</div>
</div>
.flex-order {
   border: solid 1px DimGray;
   display: flex;
}
.item-order:nth-child(1) {
   width: 50px;
   background: Moccasin;
   order: 2;
}
.item-order:nth-child(3) {
   width: 50px;
   background:LightSkyBlue;
   order: 1;
}
.item-order:nth-child(2) {
   width: 50px;
   background: Moccasin;
}
justify-content
расположит дочерние элементы вдоль контейнера, не заполняя свободное пространство
1
2
3
<div class="flex-justify-content">
  <div class="item-justify-content">1</div>
  <div class="item-justify-content">2</div>
  <div class="item-justify-content">3</div>
</div>
.flex-justify-content {
width: 250px;
    border: solid 1px DimGray;
    display: flex;
    justify-content: center;	
}
.item-justify-content:nth-child(1) {
    width: 50px;
    background: Moccasin;
}
.item-justify-content:nth-child(2) {
	width: 50px;
    background:LightSkyBlue;
}
.item-justify-content:nth-child(3) {
	width: 50px;
    background: Moccasin;
}
flex-wrap
переносит или не переносит дочерние элементы при переполнении контейнера

Значение wrap-nowrap не переносит элементы, а равномерно заполняет доступное пространство в контейнере.

1
2
3
4
5
6
<div class="flex-wrap-nowrap">
  <div class="item-wrap-nowrap">1</div>
  <div class="item-wrap-nowrap">2</div>
  <div class="item-wrap-nowrap">3</div>
  <div class="item-wrap-nowrap">4</div>
  <div class="item-wrap-nowrap">5</div>
  <div class="item-wrap-nowrap">6</div>
</div>
.flex-wrap-nowrap {
   border: solid 1px DimGray;
   width: 200px;
   display: flex;
   flex-wrap: nowrap;		
} 
.item-wrap-nowrap:nth-child(odd) {
   background:LightSkyBlue;
}	
.item-wrap-nowrap {
   width: 50px;
   height: 50px;
   background: Moccasin;
}

Значение wrap переносит элементы вниз, если ширина контейнера переполнена.

1
2
3
4
5
6
<div class="flex-wrap">
  <div class="item-wrap">1</div>
  <div class="item-wrap">2</div>
  <div class="item-wrap">3</div>
  <div class="item-wrap">4</div>
  <div class="item-wrap">5</div>
  <div class="item-wrap">6</div>
</div>
.flex-wrap {
   border: solid 1px DimGray;
   width: 200px;
   display: flex;
   flex-wrap: wrap;		
} 
.item-wrap:nth-child(odd) {
   background:LightSkyBlue;
}	
.item-wrap {
   width: 50px;
   height: 50px;
   background: Moccasin;
}

Значение wrap-reverse переносит элементы вверх, если ширина контейнера переполнена.

1
2
3
4
5
6
<div class="flex-wrap-reverse">
  <div class="item-wrap-reverse">1</div>
  <div class="item-wrap-reverse">2</div>
  <div class="item-wrap-reverse">3</div>
  <div class="item-wrap-reverse">4</div>
  <div class="item-wrap-reverse">5</div>
  <div class="item-wrap-reverse">6</div>
</div>
.flex-wrap-reverse {
   border: solid 1px DimGray;
   width: 200px;
   display: flex;
   flex-wrap: wrap-reverse;	
}
.item-wrap-reverse:nth-child(odd) {
   background:LightSkyBlue;
}	
.item-wrap-reverse {
   width: 50px;
   height: 50px;
   background: Moccasin;
}