Шпаргалка по FLEXBOX // «Фрилансер по жизни»

Полезные ссылки
Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера.
Свойства FLEX - контейнера. Применяются для flex-контейнера, обертки flex-элементов
Видеоурок - тут
Свойство display со значениями flex/inline-flex
.block{
}
.block__row{
border: 10px solid #ece89d;}
.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Определяет блочный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display: flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display: inline-flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
.block{
text-align: center;}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display: inline-flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex-wrap
Значение по умолчанию (не нужно указывать). Flex-элементы не смогут перемещаться на следующие строки flex-контейнера.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:nowrap;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы смогут перемещаться на следующие строки flex-контейнера.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:wrap;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы смогут перемещаться на следующие строки flex-контейнера, но в обратном порядке.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; width: 170px; flex-wrap:wrap-reverse;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex-direction
Значение по умолчанию (не нужно указывать). Основная ось горизонтальная. Все flex-элементы расположатся слева направо по горизонтали.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:row;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Все flex-элементы расположатся справа налево по горизонтали.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:row-reverse;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся сверху вниз.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:column;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся снизу вверх.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:column-reverse;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Существует еще свойство flex-flow. Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют основную и поперечные ось и возможность перемещаться по строкам. По умолчанию row nowrap.
Свойство justify-content
Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:flex-start;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы прижимаются к концу основной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:flex-end;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются по центру основной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:center;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:space-between;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:space-around;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:space-evenly;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство align-items
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px; align-items:stretch;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы прижимаются к началу поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px; align-items:flex-start;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы прижимаются к концу поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px; align-items:flex-end;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются по центру поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px; align-items:center;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются по базовой линии.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px; align-items:baseline;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
.block__element_2 .block__content{
font-size: 40px;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойства FLEX - элементов. Применяются для flex-элемента, дочернего объекта flex-контейнера
Видеоурок - тут
Свойство order
Значение по умолчанию (не нужно указывать).
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
order:1;}
/* flex-элемент №2 */.block__element_2{
order:2;}
/* flex-элемент №3 */.block__element_3{
order:3;}
/* flex-элемент №4 */.block__element_4{
order:4;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
order:3;}
/* flex-элемент №2 */.block__element_2{
order:2;}
/* flex-элемент №3 */.block__element_3{
order:4;}
/* flex-элемент №4 */.block__element_4{
order:1;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
order:4;}
/* flex-элемент №2 */.block__element_2{
order:1;}
/* flex-элемент №3 */.block__element_3{
order:2;}
/* flex-элемент №4 */.block__element_4{
order:3;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство align-self
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
/* наследует align-items:stretch; */ align-self:auto;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
/* наследует align-items:stretch; */ align-self:auto;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы прижимаются к началу поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
align-self:flex-start;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
align-self:flex-start;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы прижимаются к концу поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
align-self:flex-end;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
align-self:flex-end;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элементы располагаются по центру поперечной оси.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; height:150px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
align-self:center;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
align-self:center;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex-basis
Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-basis:auto;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-basis:auto;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Устанавливаем двум flex-элементам начальную ширину в пикселях.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-basis:200px;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-basis:400px;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Устанавливаем двум flex-элементам начальную ширину в процентах.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-basis:20%;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-basis:40%;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex-grow
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-grow:0;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-grow:0;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элемент увеличится, заполняя пространство flex-контейнера.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-grow:1;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-grow:1;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex-shrink
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; max-width:400px; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-basis:200px; flex-shrink:1;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-basis:300px; flex-shrink:1;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элемент не может увеличится.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; max-width:400px; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex-basis:200px; flex-shrink:0;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex-basis:300px; flex-shrink:0;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Свойство flex. Сокращенная запись для flex-grow, flex-shrink и flex-basis (рекомендуется)
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличиваться, может уменьшаться. Базовый размер автоматический.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex: 0 1 auto;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex: 0 1 auto;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элемент может увеличиваться, может уменьшаться. Базовый размер автоматический.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex: 1 1 auto;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex: 1 1 auto;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элемент не может увеличиваться, не может уменьшаться. Базовый размер 200px.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex: 0 0 200px;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex: 0 0 200px;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Flex-элемент может увеличиваться, не может уменьшаться. Базовый размер 50%.
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex: 1 0 50%;}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
flex: 1 0 50%;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Практические примеры
Видеоурок - тут
Горизонтальная структура
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373; flex: 0 1 33.333%;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
}
/* flex-элемент №3 */.block__element_3{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-wrap:wrap;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373; flex: 0 1 50%;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-wrap:wrap;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
flex: 0 1 100%;}
/* flex-элемент №2 */.block__element_2{
flex: 0 1 50%;}
/* flex-элемент №3 */.block__element_3{
flex: 0 1 50%;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
display: flex; margin: 0px -5px;}
/* flex-элемент */.block__element{
padding: 0px 5px; flex: 0 1 25%;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
}
/* flex-элемент №3 */.block__element_3{
}
/* flex-элемент №4 */.block__element_4{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
flex: 0 0 200px;}
/* flex-элемент №2 */.block__element_2{
flex: 1 1 auto;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
Вертикальная структура
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
flex: 1 1 auto;}
/* flex-элемент №3 */.block__element_3{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; align-items: center;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
}
/* flex-элемент №3 */.block__element_3{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; flex-direction:column; height: 300px; justify-content: space-between;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* flex-элемент №1 */.block__element_1{
}
/* flex-элемент №2 */.block__element_2{
}
/* flex-элемент №3 */.block__element_3{
}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
По центру
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display:flex; justify-content:center; align-items:center; height: 300px;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}