Материал

flex контейнер
Программирование / CSS·

Выравнивание блоков с помощью css с использованием flex контейнера

С развитием Интернет технологий, в том числе и HTML и CSS, для разработчиков постоянно открываются новые возможности по созданию сайтов. Одной из проблем остается наличие устаревших версий браузеров. В основном это касается Internet Explorer, особенно у тех, кто использует windows xp.

Перед верстальщиком Интернет страниц часто возникает задача выравнивания блоков css на странице. Например, можно расположить все блоки один за другим, горизонтально, расположить их по центру или снизу контейнера и т.д. С появлением параметра свойства display - flex эта задача значительно упрощается. Эта технология разработана таким образом, чтобы компоновать дочерние элементы, то есть элементы внутри блока или контейнера. Параметров этой компоновки более чем достаточно.

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

 .container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:stretch;
   }

Основное свойство - display: flex. Для того, чтобы дочерние элементы размещались в несколько строк добавляем свойство - flex-wrap: wrap.

А как раз свойство align-content указывает на то, как должны располагаться и выравниваться блоки css. Параметр stretch позволяет блокам равномерно расположиться в контейнере. При этом их высота может подбираться автоматически. Как это выглядит. Добавим css для внутренних блоков.

.container div {
    width: 50px;
    background: green;
    margin:5px;
   }

Высоту мы не задаем специально. Html код выглядит следующим образом:

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

Результат работы кода на рисунке.

viravnivanie-div-flex-1

Что же получиться, если указать еще высоту блоков:

.container div {
    width: 50px;
    height: 50px;
    background: green;
    margin:5px;
   }

viravnivanie-div-flex-2

Теперь уберем высоту и сделаем ширину блоков равной 100%

.container div {
    width: 100%;
    background: green;
    margin:5px;
   }

Получаем.

viravnivanie-div-flex-3

Еще одним параметром align-content является center и повзволяет выровнять все блоки по центру.

CSS код:

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:center;
   }
   .container div {
    width: 50px;
    height:50px;
    background: green;
    margin:5px;
   }

Результат:

viravnivanie-div-flex-4

Другой параметр flex-end свойства align-content позволит расположить блоки снизу контейнера.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
   }

viravnivanie-div-flex-5

Параметр flex-start сделает все с точностью до наоборот.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
   }

viravnivanie-div-flex-6

Еще один параметр свойства align-content, создать результаты которого без использования контейнера flex будет нелегко - это space-between. Свойство располагает первую линию вверху, а вторую снизу, создавая между ними пустое пространство (space).

Часть CSS кода:

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
   }

Результат:

viravnivanie-div-flex-7

Свойство space-around добавляет пустое пространство сверху и снизу. Причем каждое из них равно половине пустого пространтсва по центру.

.container {
    width:450px;
    height:250px;
    border: 1px solid #000000;
    display: flex;
    flex-wrap: wrap;
    align-content:space-around;
   }

viravnivanie-div-flex-8

Итак свойство css align-content имеет множество параметров: stretch, flex-start, flex-end, center, space-between, space-around.

Как видно из примеров выше, изменяя один параметр свойства css align-content мы совершенно по разному используем выравнивание блоков css при помощи технологии flex. Данный код не работает в Internet Explorer до 10 версии включительно.

Поделиться в соц. сетях: