CSS 3

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

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

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

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

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

<!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>

.wrap{
  display: flex; // для родителя
  background-color: #ccc;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
    height:200px;
  }

Результат:

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

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

flex-direction:row (по умолчанию) последовательность элементов слева направо
flex-direction:row-reverse последовательность элементов справа налево
flex-direction:column последовательность сверху вниз
flex-direction:column-reverse последовательность снизу вверх

.wrap{
  display: flex; // для родителя
  background-color: #ccc;
  flex-direction:column; // Задание направления сверху вниз
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
    height:200px;
  }

Результат:

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

align-items

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

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

align-self

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

    <div class="wrap">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>

.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;
  }
}

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

justify-content

justify-content: center; — Выравнивание элементов по центру
justify-content: space-around; — Выравнивание элементов по центру и задание одинаковых отступов между ними
justify-content: space-between; — Выравнивание элементов по ширине причём крайние элементы прижимаются к соответствующим сторонам
justify-content: flex-start; — Выравнивание по левому краю
justify-content: flex-end; — Выравнивание по правому краю

.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; // задание ширины элемента к которой он должен стремиться (желаемый размер элемента)
  }
}

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

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

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

.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;
  }
}

Результат:

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

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

flex-wrap

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

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

.wrap{
  display: flex;
  background-color: #ccc;
  height:200px;
  align-items: stretch;
  flex-wrap: wrap;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
  }
}

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

order:

.wrap{
  display: flex;
  background-color: #ccc;
 
  div{
    background-color: #ccbb9d;
    margin: 10px;
    width: 200px;
  }
  .item2{
    order: -1;
  }
}