Выравнивание флекс-элементов в контейнере

Когда флекс-элементы разной высоты выстроены в ряд, или столбец составлен из элементов разной ширины, их также можно выровнять по определённой линии.

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

align-items выравнивание элементов по оси Y, элементов, расположенных в контейнере flex в стандартном размещении по оси Х.

Выравнивать по оси Y можно только если у flex контейнера есть элемент, который больше по высоте остальных элементов, если все элементы по высоте одинаковые, выравнивание не будет.

align-items: stretch; - является свойством по умолчанию, элементы которые меньше самого высокого элемента по оси Y, занимают пространство соразмеряемое самому высокому элементу, даже если его содержимое (контент) меньше по высоте самого высокого элемента.

align-items: flex-start; - выравнивает самые низкие элементы по верхней границы блока flex и отменяет у этих элементов заполнение свободного пространство оси Y.

align-items: flex-end; - выравнивает самые низкие элементы по нижней границы блока flex и отменяет у этих элементов заполнение свободного пространство оси Y.

align-items: center; - выравнивает самые низкие элементы по середине блока flex относительно самого высокого элемента и отменяет у этих элементов заполнение свободного пространство оси Y.

1

2 специально большой блок

3

align-items:



  - flex контейнер 
 

  - flex элемент 


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

 родительский контейер  
.parent {
    display:flex;
    align-items:stretch;
    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);
}

 контент дочернего блока №2  
.item__content2 {
    background-color: rgba(12, 134, 88, 0.63);
    padding: 20px;
    font-size: 30px;
    height: 200px;
    width: 400px;
    color: rgb(255, 255, 255);
}