Justify-content– выравнивание по главной оси.
Урок 7
Flexbox
Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении сеток в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас?
Мы уже знаем один способ размещать блоки на странице так как нам удобно, но он очень ограничен и требует множества вычислений и особой магии при выравнивании некоторых блоков. Flexbox – это новый инструмент, который решает огромное количество задач, которые раньше решались с трудом.
Случилось это потому, что html и css развивались эволюционно. В начале веб-страницы были похожи на однопоточные текстовые документы, чуть позже разбиение страницы на блоки делали таблицами, а после добавились еще и приемы с inline-block. В итоге мы получили в наследство смесь всех этих приемов, используемую для построения сеток.
Спецификация CSS FlexibleBoxLayoutModule (в народе Flexbox) призвана полностью изменить ситуацию в лучшую сторону. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
Основные преимущества flexbox
· Все блоки очень легко делаются “резиновым”. Элементы могут сжиматься и растягиваться по заданным правилам и занимая нужное пространство.
· Выравнивание по вертикали и горизонтали, базовой линии работает отлично.
|
|
|
· Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS.
· Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.
· Синтаксис CSS правил очень прост и осваивается довольно быстро.
Начинаем погружение
Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.
HTML
<div class="flex">
<div class="flex_block_1"></div>
<div class="flex_block_2"></div>
<div class="flex_block_3"></div>
</div>
CSS
.flex{
display: flex;
border: 5px solid #ccc;
border-radius: 5px;
}
.flex div{
width: 200px;
height: 200px;
border-width: 5px;
border-style: solid;
border-radius: 5px;
}
.flex_block_1{
background-color: #e44b41;
border-color: #b9382f;
}
.flex_block_2{
background-color: #2574de;
border-color: #0d3e81;
}
.flex_block_3{
background-color: #10d28d;
border-color: #0d9e6a;
}
Результат нашего кода. Серой рамкой обозначен контейнер к которому мы применили свойство display:flex;
Основные свойства flex-контейнера. Главная и поперечная ось.
Одним из основных понятий в fleхbox являются оси.
Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы. Она по умолчанию располагается слева направо.
|
|
|
Поперечной осью называется направление, перпендикулярное главной оси. Она по умолчанию располагается сверху вниз.
Направление главной оси flex-контейнера можно задавать, используя базовое cssсвойство flex-direction.
Flex-direction — направление главной оси
Доступные значенияflex-direction:
· row (значение по умолчанию) : слева направо;
· row-reverse: справа налево;
· column: сверху вниз;
· column-reverse: снизу вверх;
Добавив в первом примере свойство flex-direction:column; мы получаем уже другой результат. Все наши блоки расположатся в одну колонку.
.flex{
display: flex;
border: 5px solid #ccc;
border-radius: 5px;
flex-direction: column;
}
justify-content– выравнивание по главной оси.
Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.
Доступные значенияjustify-content:
· flex-start (значение по умолчанию): блоки прижаты к началу главной оси;
· flex-end: блоки прижаты к концу главной оси;
· center: блоки располагаются в центре главной оси;
· space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве;
· space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну;
|
|
|
Все производимые изменения хорошо показаны на картинке ниже.
Дата добавления: 2018-05-09; просмотров: 333; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!