Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

CSS flexbox

Всем привет и давайте перейдем к делу. Модуль 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, только самое основное и часто используемое.

Надеюсь данная статья была для вас полезна и содержательна.

А я желаю вам успехов и удачи! Пока!

Оцените статью

Еще статьи

Методы идентификации подстрок в ES6

Переменные окружения PHP

Индикаторы html

Слияние веток GIT

Интерфейс MediaDevicesInfo в javascript

Коллекции javascript

константы php 7

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.