Количество просмотров:
0
Flexbox CSS - три основных свойства выравнивания элементов
В текущем уроке разберем три основных свойства Flexbox CSS - display | justify-content | align-items. При помощи их можно выравнивать flex-элементы по горизонтали и вертикали.
See the Pen #1 Flexbox – display | justify-content | align-items by Denis (@Dwstroy) on CodePen.
Делаем площадку для тестирования свойств Flexbox
Для теории подготовим плацдарм, на котором буду рассматривать поведение flex-элементов. Для этого сделаю отдельную директорию (lesson) и создам в ней index файл.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>#1 Flexbox – display | justify-content | align-items</title> </head> <body>
Блок с классом dws-wrapper, будет служить оберткой всего содержимого. В нем пропишем заголовок с темой урока "#1 Flexbox – display | justify-content | align-items".
Далее нам понадобится, блок, который будет выступать в качестве flex-контейнера, в нутрии его расположим flex-элементы. Используем UL в качестве контейнера, а списки LI в качестве элементов. В нутрии добавлю текст с порядковым номером элемента.
ul.flex-cont>li.flex-elem{elem-$}*6
<ul class="flex-cont"> <li class="flex-elem">elem-1</li> <li class="flex-elem">elem-2</li> <li class="flex-elem">elem-3</li> <li class="flex-elem">elem-4</li> <li class="flex-elem">elem-5</li> <li class="flex-elem">elem-6</li> </ul>
Для более понятной визуализации придам оформление данным элементам.
Создам, и подключим два файла, в первом описываем стандартное оформление элементов, во втором прописываем правила по flexbox и все это расположим в новой директории css.
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/flexbox.css">
Когда речь идет о flexbox, вы визуально должны представлять перед собой какой-то контейнер. Что бы это было наглядней, UL представим в виде блока, где зададим для него базовый цвет, уберем маркировку списков и добавим внутренние отступы. Это будет будущей flex-контейнер.
ul {
background: #ccc;
list-style-type: none;
padding: 10px;
}
Затем оформим списки LI в качестве отдельных блоков, они являются дочерними элементами будущего flex-контейнера. Сделаем их фон определенного цвета, увеличим шрифт, которому присвоим белый цвет, и зададим внешние и внутренние отступы каждому элементу. Плюс дополнительно проведу еще некие оформления.
li {
background-color: #18758d;
font-size: 20px;
color: #ffffff;
margin: 5px;
padding: 10px;
}
.dws-wrapper {
margin-top: 100px;
font-family: Verdana, sans-serif;
}
h1 {
color: #114d5e;
font-size: 16px;
line-height: 25px;
}
h1 span {
color: #ffffff;
background: #074249;
padding: 3px 8px;
}
И так, мы получили некий контейнер с вложенными в нем элементами. Элементы ведут себя стандартным образом, занимая всю допустимую ширину родительского контейнера.
Для чего этот весь процесс подробно описал, для того что бы вы понимали, что flexbox может быть любой элемент, будь то UL или отдельно взятый блок, разницы не какой не имеет.
Разбираем три основных свойства FLEXBOX
Свойство display
Первое свойство, с которым познакомимся это display, при помощи которого объявляем flex-контейнер.
<h1><span>display</span> (объявляем flexbox)</h1>
Свойство display применимо только для контейнера, и имеет два значения:
display: flex – делает flex-контейнер блочным элементом который занимает всю ширину экрана.
display: flex;
display: inline-flex – контейнер преобразуется в строчный элемент, который занимает только отведенное пространство.
display: inline-flex;
Мы будем использовать flex, так как собираемся позиционировать элементы в нутрии flex-контейнера.
.flex-cont {
display: flex;
}
Обратите внимание, что когда объявили правило display: flex, все его дочерние элементы стали flex-элементами и приняли горизонтальное положение, выстраивавшиеся в ряд. Такое ранее расположение мы достигали путем float: left к тому же, после последнего элемента нам приходилось сбрасывать обтекание, что бы фон блока не схлопывался.
.flex-elem {
float: left;
}
<div style="clear: both;"></div>
Теперь это мы делаем все одной записью display: flex, и нет проблем схлопыванием фона у контейнера.
Далее давайте разберем, горизонтальное выравнивание flex-элементов, но прежде немного о flex-контейнере и flex-элементах.
Для каждых из них есть свои определенные свойства, как для flex-контейнера, так и для flex-элементов. Когда задаем свойства для контейнера, тем самым мы задаем какое-то поведение всех его дочерних элементов. В тоже время, когда задаем свойство для элементов, это подразумевается правило для конкретного элемента или для какой-то группы.
В данном уроке мы работаем с контейнером, а соответственно свойство применяется ко всем его дочерним элементам.
Свойство justify-content – (Выравнивание по горизонтали)
Рассмотрим выравнивание flex-элементов по горизонтали, для этого есть свойство justify-content, оно применимо только для контейнера, имеет пять значений.
justify-content: flex-start, значение по умолчанию, все элементы позиционируются в начале контейнера.
justify-content: flex-start;
justify-content: flex-end, элементы позиционирует в конце контейнера.
justify-content: flex-end;
justify-content: center, все элементы позиционирует по середине flex-контейнера.
justify-content: center;
justify-content: space-between, первый и последний элемент позиционируется по краям контейнера, а все остальные элементы равномерно распределяют пространство между собой.
justify-content: space-between;
justify-content: space-around, элементы позиционируются по горизонтали равномерно, распределяя между собой все свободное пространство.
justify-content: space-around;
Свойство align-items - (Выравнивание по вертикали)
Как с горизонтальным выравниванием, есть так же свойство для выравнивания flex-элементов по вертикали.
<h1><span>align-items</span> - Выравнивание по вертикали</h1>
Называется оно align-items, устанавливается только для контейнера и имеет пять значений, но что бы с ним познакомится, давайте любому элементу добавим содержание блока, что бы он растянулся по высоте, и у нас появилось пространство для позиционирования элементов.
<ul class="flex-cont"> <li class="flex-elem">elem-1</li> <li class="flex-elem">elem-2</li> <li class="flex-elem">elem-3</li> <li class="flex-elem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, blanditiis consectetur deserunt dolores eos error et explicabo iste iure labore laboriosam laudantium maxime neque nesciunt quo quos reiciendis suscipit unde!</li> <li class="flex-elem">elem-5</li> <li class="flex-elem">elem-6</li> </ul>
Что мы видим, другие элементы так же растянулись на всю высоту контейнера.
align-items: stretch, значение по умолчанию, элементы растягиваются на всю высоту flex-контейнера.
align-items: stretch;
align-items: flex-start, элементы позиционируются по верхнему краю контейнера.
align-items: flex-start;
align-items: flex-end, элементы позиционируются по нижнему краю контейнера.
align-items: flex-end;
align-items: center, элементы выравниваются по центру flex-контейнера.
align-items: center;
align-items: baseline, выравнивает элементы по базовой оси. На данный момент мы не увидим разницы от значения flex-start, но если добавить картинку, вы увидите другой результат.
align-items: baseline;
<li class="flex-elem"><img src="https://unsplash.it/150/150?image=0"></li>
В уроке показал, как выравнивать flex-элементы по горизонтали и вертикали, если понравился материал поделись им в социальных сетях.
Урок подготовил Горелов Денис.