Шпаргалка по FLEXBOX // «Фрилансер по жизни»
Полезные ссылки
Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера.
Свойства FLEX - контейнера. Применяются для flex-контейнера, обертки flex-элементов
Видеоурок - тут
Свойство display со значениями flex/inline-flex
Определяет flex-контейнер, блочный или строчный зависит от переданного значения. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
1
2
3
4
HTML код: тут
CSS код:
/* родитель */
.block{
}
.block__row{
border: 10px solid #ece89d;}
.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Определяет блочный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
HTML код: тут
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display: flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
HTML код: тут
CSS код:
/* родитель */
.block{
}
/* flex-контейнер */.block__row{
border: 10px solid #ece89d; display: inline-flex;}
/* flex-элемент */.block__element{
border: 5px solid #5e5373;}
/* контент */.block__content{
background-color: #18b5a4; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Определяет строчный flex-контейнер. Преобразовывает все свои прямые, дочерние элементы во flex-элементы.
HTML код: тут
CSS код:
/* родитель */
.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-контейнера.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы не смогут перемещаться на следующие строки flex-контейнера.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы смогут перемещаться на следующие строки flex-контейнера.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы смогут перемещаться на следующие строки flex-контейнера, но в обратном порядке.
HTML код: тут
CSS код:
/* родитель */
.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-элементов расположенных в flex-контейнере.
1
2
3
4
Значение по умолчанию (не нужно указывать). Основная ось горизонтальная. Все flex-элементы расположатся слева направо по горизонтали.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Все flex-элементы расположатся справа налево по горизонтали.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся сверху вниз.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Основная ось сменится с горизонтальной на вертикальную. Все flex-элементы расположатся снизу вверх.
HTML код: тут
CSS код:
/* родитель */
.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-direction).
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы прижимаются к началу основной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы прижимаются к концу основной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются по центру основной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси. Первый элемент находится в начале оси, последний элемент находится в конце оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси .К каждому flex-элементу добавляется пространство слева и справа.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются равномерно по основной оси с одинаковым пространством вокруг них.
HTML код: тут
CSS код:
/* родитель */
.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-direction).
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы прижимаются к началу поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы прижимаются к концу поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются по центру поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются по базовой линии.
HTML код: тут
CSS код:
/* родитель */
.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
Управляет порядком, в котором располагаются flex-элементы внутри flex-контейнера.
1
2
3
4
Значение по умолчанию (не нужно указывать).
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
HTML код: тут
CSS код:
/* родитель */
.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-direction). На примере flex-элементов №2 и №4.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элементы растягиваются на весь размер поперечной оси flex-контейнера.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы прижимаются к началу поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы прижимаются к концу поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элементы располагаются по центру поперечной оси.
HTML код: тут
CSS код:
/* родитель */
.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-элементов №2 и №4.
1
2й flex-элемент
3
4й flex-элемент
Значение по умолчанию (не нужно указывать). Flex-элемент будет занимать размер в зависимости от контента внутри него.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Устанавливаем двум flex-элементам начальную ширину в пикселях.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Устанавливаем двум flex-элементам начальную ширину в процентах.
HTML код: тут
CSS код:
/* родитель */
.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-контейнер. 0 запрещено. 1 разрешено. На примере flex-элементов №2 и №4.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элемент увеличится, заполняя пространство flex-контейнера.
HTML код: тут
CSS код:
/* родитель */
.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-контейер. 0 запрещено. 1 разрешено. На примере flex-элементов №2 и №4.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличится.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элемент не может увеличится.
HTML код: тут
CSS код:
/* родитель */
.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-контейнер (0 запрещено. 1 разрешено). А так же задаёт базовый размер. На примере flex-элементов №2 и №4.
1
2
3
4
Значение по умолчанию (не нужно указывать). Flex-элемент не может увеличиваться, может уменьшаться. Базовый размер автоматический.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элемент может увеличиваться, может уменьшаться. Базовый размер автоматический.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элемент не может увеличиваться, не может уменьшаться. Базовый размер 200px.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
Flex-элемент может увеличиваться, не может уменьшаться. Базовый размер 50%.
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
Практические примеры
Видеоурок - тут
Горизонтальная структура
Примеры построения горизонтальной структуры flex-элементов (колонок).
1
2
3
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
4
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
Вертикальная структура
Примеры построения вертикальной структуры flex-элементов (ряды).
1
2
3
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
1
2
3
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}
По центру
Центрируем блок.
1
HTML код: тут
CSS код:
/* родитель */
.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; /* плюс прочие стили для текста, отступы */}