justify-content CSS

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

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

Свойство **`justify-content`** определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента [`flex-grow`](/css/flex-grow/) больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Значение по умолчанию:

flex-start

Значение по умолчанию:
`flex-start`
Наследуется:
Нет
Применяется:

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

Применяется:
К флекс-контейнерам
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Box Alignment Module Level 3](https://drafts.csswg.org/css-align-3/#propdef-justify-content) * [CSS Flexible Box Layout Module](https://www.w3.org/TR/css-flexbox/#propdef-justify-content)
Поддержка браузерами:

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

Поддержка браузерами:
<p class="ciu_embed" data-feature="flexbox" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=flexbox">Can I Use flexbox?</a> Data on support for the flexbox feature across the major browsers from caniuse.com. </p>

Синтаксис

/* 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;

Синтаксис

/* 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.

Значения

* `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>

Примеры

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

Содержание

  • Синтаксис
      /* 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;
  • Значения
    • Примеры
        <!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>

    В начало