Przykład
Dodać trochę miejsca wokół elementów elastycznego <div> element:
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość uzasadnić-content wyrównuje elementy elastycznego pojemnika, gdy przedmioty nie wykorzysta całą dostępną przestrzeń na głównej osi (horizontally) .
Wskazówka: Użyj ALIGN-przedmioty własności do wyrównania elementów na przekroju osi (vertically) .
| Domyślna wartość: | flex-start |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.justifyContent="space-between" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| justify-content | 29,0 21,0 -webkit- | 11,0 | 28,0 18,0 -moz- | 9,0 6,1 -webkit- | 17,0 |
Składnia CSS
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| flex-start | Domyślna wartość. Elementy są umieszczone na początku pojemniku | Graj " |
| flex-end | Elementy są umieszczone na końcu pojemnika | Graj " |
| center | Elementy są umieszczone w środku pojemnika | Graj " |
| space-between | Elementy są umieszczone w przestrzeni między liniami | Graj " |
| space-around | Elementy są umieszczone w przestrzeni przed, pomiędzy i po liniach | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Podobne strony
CSS: align-items property
CSS: align-self property
HTML DOM referencyjny: justifyContent property