Всем привет и давайте перейдем к делу. Модуль flexbox включает в себя целую серию новых свойств и значений CSS.
Рассмотрим следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Работа с модулем flexbox
</title>
</head>
<body>
<style>
.children
{
border: 1px solid #00f;
}
</style>
<div class="main">
<div class="children">
Элемент 1
</div>
<div class="children">
Элемент 2
</div>
<div class="children">
Элемент 3
</div>
<div class="children">
Элемент 4
</div>
</div>
</body>
</html>
Здесь у нас указан родительский блок с классом main и его дочерние с классами children.
Все элементы являются блочными и поэтому занимают всю ширину и идут в колонку.
Допустим мы хотим расположить эти блоки в одну линию. И для этого мы можем родительскому блоку прописать:
.main{
display:flex;
}
и все наши блоки выровняются в одну линию. Что же здесь произошло? А произошло следующее, после того как мы главному элементу прописали свойство display:flex;, все его дочерние элементы стали flex-элементами. Ширина flex-элемента зависит от его содержимого, причем не важно блочный это или встроенный элемент. Элементы также расположены последовательно друг за другом, как если бы мы задали им обтекание по левому краю(float:left;), только здесь на не нужно заботится о схлопывании границ и очистке обтекания.
Все, теперь мы можем проводить различного рода манипуляции над flex-элементами с помощью следующих свойств:
1. justify-content - c помощью данного свойства мы можем выравнивать наши элементы по левому и правому краю, по центру, по краям, по всей ширине.
justify-content:flex-start;/*По левому краю */
justify-content:flex-end;/*По правому краю */
justify-content:center;/*По центру*/
justify-content:space-between;/*По краям */
justify-content:space-around;/*По ширине*/
Допустим мы хотим выровнять все наши flex -элементы по краям:
.main{
display:flex;
justify-content: space-between;
}
как видите первый и последний элементы прижались к краям. Едем дальше.
2. align-items - данное свойство выравнивает flex-элементы по вертикали:
Чтобы его лучше рассмотреть зададим родительскому элементу высоту 200px:
.children{
border:1px solid #00f;
width:25%;
}
.main{
display:flex;
height:200px;
}
и далее рассмотрим значения которые может принимать свойство align-items:
stretch - растягивает flex-элемент по всей высоте контейнера(значение по умолчанию)
align-items: stretch;
flex-start - элементы прижимаются к верху контейнера
align-items: flex-start;
flex-end - элементы прижимаются к низу контейнера
align-items: flex-end;
center - элементы центрируются по вертикали
align-items: center;
center - элементы центрируются по вертикали
align-items: center;
baseline - элементы выравниваются по базовой линии, то есть если у flex-элементов не задана высота, то она вычисляется по его содержимому , пример:
.children{
border:1px solid #00f;
width:25%;
}
.main{
display:flex;
height:200px;
align-items: baseline;
}
Если же мы хотим определить выравнивание для определенных flex-элементов, для этого существует свойство align-self:
.children{
border:1px solid #00f;
width:25%;
}
.children:nth-of-type(even){
align-self:center;
}
.main{
display:flex;
height:200px;
}
как видите здесь мы отцентрировали по вертикали все четные элементы, данное свойство имеет такие же значения как и align-items, поэтому мы их повторно рассматривать не будем.
3. flex-direction - определяет как flex-элементы будут располагаться относительно друг друга.
flex-direction:row;
элементы располагаются слева на право относительно друг друга, данное значение идет по умолчани.
flex-direction:row-reverse;
элементы расположены справа налево.
flex-direction:column;
элементы расположены сверху вниз.
flex-direction:column-reverse;
элементы расположены снизу вверх
Пример:
.children{
border:1px solid #00f;
width:25%;
}
.main{
display:flex;
height:200px;
flex-direction:column-reverse;
}
4.flex-wrap - данное свойство отвечает за многострочность элементов и может принимать следующее значение:
nowrap - flex-элементы располагаются в одну строку без переносов(значение по умолчанию)
flex-wrap:nowrap;
wrap - flex-элементы помещаются в несколько рядов слева направо, если не помещаются в строке
flex-wrap:wrap;
wrap-reverse - flex-элементы помещаются в обратном порядке справа налево причем перенос происходит вверх
flex-wrap:wrap-reverse;
пример:
.children{
border:1px solid #00f;
width:25%;
}
.main{
display:flex;
height:200px;
flex-wrap:wrap-reverse;
}
5. order - c помощью данного свойства мы можем переставлять flex-элементы в начало или конец:
.first_element{
order:-1;
}
значение -1 переставит элемент с классом first_element в самое начало, а 1 в конец.
Пример:
<style>
.children
{
border: 1px solid #00f;
width: 25%;
}
.first_element
{
order: 1;
}
.main
{
display: flex;
height: 200px;
}
</style>
<div class="main">
<div class="children">
Элемент 1
</div>
<div class="children last_element">
Элемент 2
</div>
<div class="children" >
Элемент
</div>
<div class="children" >
Элемент 4
</div>
</div>
здесь мы второй элемент переставили в самый конец.
6.flex-basis - указывается значение ширины flex-элемента в px, em или %.
.children{
border:1px solid #00f;
flex-basis: 25%;
}
.main{
display:flex;
}
тут мы указали ширину для каждого дочернего элемента 25%.
И напоследок мы рассмотрим свойство flex c помощью которого мы можем указать элементу его базовую ширину и трансформацию, выглядит это так:
flex:0 1 25%;
где 0 - коэффициент увеличения шириины, 1 - коэффициент уменьшения ширины, 25% - ширина элемента.
Пример:
.children{
border:1px solid #00f;
flex:0 1 25%;
}
.main{
display:flex;
}
На этом дорогие друзья данная статья подошла к концу, мы рассмотрели далеко не все возможности работы с модулем flexbox, только самое основное и часто используемое.
Надеюсь данная статья была для вас полезна и содержательна.
А я желаю вам успехов и удачи! Пока!
Чат
