Вход

Вёрстка с использованием Flexbox

Вёрстка с использованием Flexbox

Технология Flexbox признана упростить работу по выравниванию элементов в браузере В этой статье мы рассмотрим как упрощается вёрстка с использованием Flexbox.

Главной проблемой вёрстки с помощью float является трудности с вертикальным выравниванием блоков. Данную проблему легко применяя flexbox.

Flexbox поддерживают все современный браузеры и ie с 9 версии.

Для того чтобы использовать flexbox нужно, задать правило display: flex; родительскому элементу

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
.wrap{
  display: flex; // для родителя
  background-color: #ccc;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
    height:200px;
  }

Результат:
Правило flexbox

 

Задание направления последовательности элементов

flex-direction — задание направления последовательности элементов. слева направо, справа налево

  • flex-direction:row (по умолчанию) последовательность элементов слева направо
  • flex-direction:row-reverse последовательность элементов справа налево
  • flex-direction:column последовательность сверху вниз
  • flex-direction:column-reverse последовательность снизу вверх
1
2
3
4
5
6
7
8
9
10
11
.wrap{
  display: flex; // для родителя
  background-color: #ccc;
  flex-direction:column; // Задание направления сверху вниз
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
    height:200px;
  }

Результат:

Flexbox задание направления сверху вниз

 

Выравнивание элементов внутри родительского с display flex (по оси Y)

align-items

  • align-items:stretch; (по умолчанию) — выравнивание по высоте родительского элемента
  • align-items:flex-start; — Выравнивание по верхнему краю
  • align-items:flex-end; — Выравнивание по нижнему краю
  • align-items:center; — Выравнивание по центру

flexbox выравнивание элементов по центру

 

Задание уникального выравнивания для каждого из элементов

align-self

  • align-self:stretch; (по умолчанию) — выравнивание по высоте родительского элемента
  • align-self:flex-start; — Выравнивание по верхнему краю
  • align-self:flex-end; — Выравнивание по нижнему краю
  • align-self:center; — Выравнивание по центру
1
2
3
4
5
6
    <div class="wrap">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.wrap{
  display: flex;
  background-color: #ccc;
  height:200px;
  align-items:center;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
  }
  .item1{
    align-self: flex-end;
  }
  .item2{
    align-self: flex-start;
  }
  .item3{
    align-self: center;
  }
  .item4{
    align-self: stretch;
  }
}

Flexbox  уникальное выравнивание для каждого из элементов

 

Выравнивание элементов внутри родительского с display flex (по оси X)

justify-content

  • justify-content: center; — Выравнивание элементов по центру
  • justify-content: space-around; — Выравнивание элементов по центру и задание одинаковых отступов между ними
  • justify-content: space-between; — Выравнивание элементов по ширине причём крайние элементы прижимаются к соответствующим сторонам
  • justify-content: flex-start; — Выравнивание по левому краю
  • justify-content: flex-end; — Выравнивание по правому краю
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
  display: flex;
  background-color: #ccc;
  height:200px;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    flex-basis: 250px; // задание ширины элемента к которой он должен стремиться (желаемый размер элемента)
  }
}

between

 

Задание уникальной ширины для элементов

flax-grow: 0 (по умолчанию)

Данное правило применяется пропорционально.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap{
  display: flex;
  background-color: #ccc;
  flex-wrap: wrap;
  justify-content: space-around;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    flex-basis: 250px; // минимальная ширина для элементов
    flex-grow:0; 
  }
  .item1{
    flex-grow: 2; // элементы занимают ширину согласно пропорции значение правила flex-grow к сумме всех flex-grow
  }
  .item3{
    flex-grow: 3;
  }
}

Результат:

grow

Для вложенных элементов может использоваться правило flex-shrink, которое работает в паре с flex-basis. flex-shrink чаще всего принимает два значения 0/1 (1 — элемент сжимается, когда ширина окна будет меньше чем flex-basis и 0 — элемент не будет сжиматься и будет «вылазить» за родителя)

 

Вывод элементов на нескольких строках

flex-wrap

По умолчанию наши элементы уменьшаются в размерах чтобы убраться в родителя:

Для того чтобы сделать перенос на новую строку необходимо использовать у родителя правило flex-wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
  display: flex;
  background-color: #ccc;
  height:200px;
  align-items: stretch;
  flex-wrap: wrap;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
  }
}

flexbox flex-wrap

 

Изменение порядка следования для элементов

order:

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
  display: flex;
  background-color: #ccc;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
  }
  .item2{
    order: -1;
  }
}

flexbox order

15 января 2018 /

1155 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

Please Login to comment
  Получать уведомления о новых комментариях  
Уведомлять