justify-content ^CSS

Become a Patron!

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.

Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Значение по умолчанию:

flex-start

Наследуется:

Нет

Применяется:

К флекс-контейнерам

Анимируется:

Нет

Спецификации:

Поддержка браузерами:

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Синтаксис

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

Значения

flex-start — Флексы прижаты к началу строки.
flex-end — Флексы прижаты к концу строки.
center — Флексы прижимаются по центру строки.
space-between — Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера.
space-around — Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

Примечание

Safari до версии 9 поддерживает свойство -webkit-justify-content.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>justify-content</title>
  <style>
   section {
    display: flex;
    margin-bottom: 10px;
   }
   section > div { 
    border: 1px solid #ccc;
    width: 100px;
    height: 100px;
    background: repeating-radial-gradient(circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px);
   }
   .flex-start {
    justify-content: flex-start;
   }
   .flex-end {
    justify-content: flex-end;
   }
   .center {
    justify-content: center;
   }
   .space-between {
    justify-content: space-between;
   }
   .space-around {
    justify-content: space-around;
   }
  </style>
 </head>
 <body>
  <section class="flex-start">
   <div></div><div></div><div></div>
  </section>
  <section class="flex-end">
   <div></div><div></div><div></div>
  </section>
  <section class="center">
   <div></div><div></div><div></div>
  </section>
  <section class="space-between">
   <div></div><div></div><div></div>
  </section>
  <section class="space-around">
   <div></div><div></div><div></div>
  </section>
 </body>
</html>

В начало

justify-content CSS