flex контейнер

flex – это целый модуль, который состоит из свойств как для дочерних элементов этого контейнера так и для родительских элементов.

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

flex - контейнер позволяет управлять элементами в одной плоскости, либо в столбцах либо в строках.

Для того чтобы включить flex разметку, блоку родителю(обвертки) необходимо задать css свойство display с параметром flex .

Вложенные флекс-контейнеры

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

Как сделать контейнер flex

display: flex; - задает контейнеру отображение как flex со свойствами блочного элемента, контейнер занимает ширину всего пространства.

display: inline-flex; - делает flex блок строчным, flex блок занимает ширину контента, а не всю доступную.

1

2

3

display:



  - flex контейнер 
 

  - flex элемент 


  - Содержимое flex элемента (контент) 
 

 родительский контейер  
.parent {
    display:block;
    border: rgba(211, 221, 66, 0.63) 20px solid;
    margin: 0px 0px 20px 0px;
}


 дочерний контейнер  
.item {
    border: rgba(97, 47, 177, 0.63) 20px solid;
}


 контент дочернего блока  
.item__content {
    background-color: rgba(12, 134, 88, 0.63);
    padding: 50px;
    font-size: 30px;
    color: rgb(255, 255, 255);
}