» » » justify-content - Распределяет пространство между элементами
65 0  

justify-content - Распределяет пространство между элементами

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

what Выравнивание выполняется после применения длин и автоматических полей. Это означает, что если в макете Flexbox имеется хотя бы один гибкий элемент с flex-grow, отличным от 0, это не будет иметь никакого эффекта, так как не будет доступного пространства.

Синтаксис написания:

{justify-content: start;}

justify-content 

Все возможные варианты написания:

/* Normal alignment */
justify-content: normal;

/* Positional alignment */
justify-content: center;   — элементы выравниваются по центру главной оси;   
justify-content: start;    — !!!(значение по умолчанию) элементы выравниваются от начала главной оси ;   
justify-content: 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 */


justify-content: space-between;  — элементы выравниваются по главной оси, распределяя свободное место между собой; 

justify-content: space-around;   — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.
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;


=== Больше о поддержке браузерами - https://developer.mozilla.org


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019