флекс-элементы. Выравнивание отдельного элемента

Заданное флекс-контейнеру свойство align-items применяется ко всем элементам сразу.

Значение по умолчанию. align-self: auto Указывает, что значение наследуется от свойства align-items.

Иногда нужно, чтобы отдельный элемент не подчинялся общему правилу. На помощь приходит свойство align-self (по-английски примерный смысл этого словосочетания — «равняться на себя»). Оно применяется непосредственно для уникального флекс-элемента и принимает те же значения, что и align-items

Для того чтобы свойство флекс бокса align-self работал необходимо чтобы у этого блока было свойство display: flex; . Данное свойство задается для определенного элемента, а не для всех сразу.

Выравнивание одного элемента по Y

• auto , - Значение по умолчанию. Указывает, что значение наследуется от свойства align-items.

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

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

• baseline - Выравнивает базовую линию элемента с базовой линией его родителя. Базовый уровень некоторых замененных элементов , таких как textarea, не указан в спецификации HTML, а это означает, что их поведение с этим ключевым словом может различаться в разных браузерах.

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

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

1

2

3

align-self:



  - flex контейнер 
 

  - flex элемент 


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

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


 дочерний контейнер  
.item {
    align-self: auto;
    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);
}