Технология flex -box давно уже не новинка, с её появление многое в мире верстки сайтов изменилось в качественную сторону, улучшив качество кода, время на его создание и в том числе даже простоту. В этом уроке я рассмотрю основные моменты использования этой технологи, которые помогут понять вам, как этим пользоваться и в чем есть основные плюсы.


Flex-box основные моменты

Эта технология пришла на смену многим знакомой технологии float благодаря которой происходило позиционирование и обтекание блоков на сайте. На данный момент технология Flex поддерживается всеми основными браузерами и проблем с ее применением нет.

Давайте не будем долго размышлять, а перейдем непосредственно к практике. Для начала я создал 3 обычных блока внутри одного родительского, я их сделал с разными цветами для того, чтобы было видно более наглядно:

HTML:

<div class="wrapper">
        <div class="col1">Lorem ipsum dolor sit amet consectetur adipisicing elit. hic at consequatur, quibusdam enim labore repudiandae quos rerum facilis vitae!</div>
        <div class="col2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium dolores et autem quasi voluptatibus dolor ea natus voluptate sint nam!</div>
        <div class="col3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Saepe corporis eius blanditiis nostrum minus, voluptatem explicabo iure omnis ratione dolore voluptatibus veritatis nisi, perferendis quaerat cum, dolor sequi. Corrupti dolorem repudiandae animi magni excepturi quis delectus, ex sint ad voluptates!</div>
    </div>

CSS:


.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
}
.col1, .col2, .col3    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
}

А вот что получилось в результате:

flex боксы

Давайте разбираться, что получилось. Благодаря добавлению в родительский блок свойства display:flex; все три блока по умолчанию выровнялись по горизонтали на всю высоту блока и по мере заполнения распределились на разные размеры по ширине. Согласитесь подобного эффекта ранее одной строкой кода добиться было невозможно.

Движемся дальше давайте в css свойства родительского блока добавим еще одно свойство flex-direction: column; и посмотрим, что у нас получится CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
}
.col1, .col2, .col3    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
}

Результат:

flex боксы flex-direction

Как вы могли заметить это свойство изменила ось расположения блоков из горизонтальной в вертикальную, а по умолчанию стоит значения row.

Основные значения flex-direction:

Менять порядок блоков и ось их расположения можно буквально одной строчкой. Продолжим, Давайте теперь зададим фиксированные размеры блокам, уберем лишний текст и посмотрим, как можно позиционировать блоки. Первым делом выравнивание flex блоков по горизонтали:

CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content:center;
}
.col1, .col2, .col3    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
    width: 100px;
    height: 100px;
}

Результат:

flex боксы justify-content

Следующее свойство, которое мы применили к родительскому блоку это выравнивание блоков внутри родительского блока по горизонтали, ну и на рисунке один из наиболее часто применяемых видов выравнивания элементов, а именно по центру.

Основные значения justify-content:

Достаточно много вариантов я естественно все не буду выкладывать, если вам интересно просто скопируйте код добавив нужное значение, и вы увидите сами как блоки будут себя вести.

Продолжим позиционирование блоков и следующее свойство это align-items, это у нас выравнивание вдоль поперечной оси, ну а если понятнее вертикальное выравнивание flex блоков.

CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
}

Результат:

flex боксы align-items

И вот у нас благодаря несложной записи, получилось выровнять блоки по центру как по горизонтали, так и по вертикали, чего ранее было не так просто добиться без flex.

Основные значения align-items:

Продолжим постигать flex и следующий момент, который обязательно нужно знать и на практике он будет постоянно пригождаться это многострочный флекс-контейнер.

CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.col1, .col2, .col3    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
    width: 40%;
}

Результат:

flex боксы flex-wrap

Здесь я убрал заданную высоту блоков и назначил ширину, после чего свойство flex-wrap: wrap; дало возможность переместить не влезающий блок по ширине на следующую строку, а по умолчанию flex-wrap имеет значение no-wrap, из-за чего все блоки и умещают в одну строку. Таким образом разрешив многосторонность, мы можем делать какой нам нужно поток блоков.

А теперь можно поговорить ещё об одном виде позиционирования flex блоков, а именно позиционирование нескольких строк блоков.

HTML:


<div class="wrapper">
        <div class="col1">1-болк </div>
        <div class="col2">2-блок </div>
        <div class="col3">3-блок </div>
        <div class="col1">1-болк </div>
        <div class="col2">2-блок </div>
        <div class="col3">3-блок </div>
    </div>


	

CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end; 
}
.col1, .col2, .col3    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
    width: 40%;
    height:40px;
}

Результат:

flex боксы align-content

Тут я добавил чтобы получилось несколько строи и соответственно с помощью align-content: flex-end; я прижал их к нижней части блока.

Основные значения align-content:

Теперь осталось рассмотреть буквально несколько последних свойств которые так же немаловажны и нередко применимы на практике, а именно порядок элементов flex. Здесь значения я уже буду задавать не родительскому блоку, а дочерним элементам, т.е. блокам внутри.

HTML:



	<div class="wrapper">
        <div class="col1">1-болк </div>
        <div class="col2">2-блок </div>
        <div class="col3">3-блок </div>
        <div class="col4">4-блок </div>
    </div>



	

CSS:

.wrapper    {
    background-color: aquamarine;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;

}
.col1, .col2, .col3, .col4    {
    border: 1px solid #3d3939;
    background-color: #beb8b8;
    width: 24%;
}

.col1 {
    order: 3;
}
.col2 {
    order: 4;
}
.col3 {
    order: 1;
}

.col4 {
    order: 2;
}

Результат:

flex боксы order

Как видно я добавил еще один блок, и каждому отдельному присвоил свое значение Order и чем оно выше тем выше элемент по порядку, по умолчанию у всех элементов 0, а значит если будет 4 блока и хотя-бы один из них будет иметь значение 1 он будет отображаться позже всех.

И последнее по моему мнению нужное и применимое свойство это flex-grow и снова к примеру:

CSS:

.col1 {
    flex-grow: 2;
}

.col2 {
    flex-grow: 2;
}

.col3 {
    flex-grow: 3;
}

.col4{
    flex-grow: 5;
}

Результат:

flex боксы grow

Здесь как можно понять из рисунка чем выше значение flex-grow тем больше место этот блок занимает, все достаточно просто.

И вот подводя итог всему вышесказанному я думаю вас должны были впечатлить возможности flex боксов, особенно если ранее занимались версткой сайтов и имеете представление как это работает. Но и для новичка я думаю теперь открыты не малые возможности которые обязательно нужно реализовать. В этом уроке перечислены не все возможности которые есть у flex я лишь описал основные, которые чаще всего применимы и которые новичкам будут полезны, и лишним не забьют голову. Надеюсь этот урок будет вам полезным на этом все.

Дата: 2023-10-28
Автор: Алексей Мезенцев
Создание Интернет-магазина на OpenCart 2.0

Видеокурс по OpenCart 2.0

Научись создавать Интернет-магазины всего за сутки!

Получить курс