Przykład
Umieść elementy z elastycznej <div> elementu z przestrzeni między liniami:
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between"; Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość alignContent wyrównuje elementy elastycznego pojemnika, gdy przedmioty nie wykorzysta całą dostępną przestrzeń na krzyżu osi (vertically) .
Wskazówka: Użyj właściwość justifyContent wyrównać elementy na głównej osi (horizontally) .
Uwaga: Nie może być wiele linii pozycji dla tej nieruchomości do żadnego efektu.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Numery obserwowani przez Webkit określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| alignContent | 21,0 | 11,0 | 28,0 | 7,0 Webkit | 12,1 |
Uwaga: Safari wspierać alternatywę, właściwość WebkitAlignContent.
Składnia
Zwraca właściwość alignContent:
object .style.alignContentUstaw właściwość alignContent:
object .style.alignContent="stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
wartości nieruchomości
| Wartość | Opis |
|---|---|
| stretch | Domyślna wartość. Elementy są rozciągane pojemnik |
| center | Elementy są umieszczone w środku pojemnika |
| flex-start | Elementy są umieszczone na początku pojemnika |
| flex-end | Elementy są umieszczone na końcu pojemnika |
| space-between | Elementy są umieszczone w przestrzeni między wierszami |
| space-around | Elementy są umieszczone w przestrzeni przed, pomiędzy i po liniach |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowy |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczyć |
Szczegóły techniczne
| Domyślna wartość: | rozciągać |
|---|---|
| Zwracana wartość: | Ciąg reprezentujący właściwość align-content elementu |
| Wersja CSS | CSS3 |
Podobne strony
Odniesienie CSS: align-content property
HTML DOM STYL referencyjny: alignItems property
HTML DOM STYL referencyjny: alignSelf property
HTML DOM STYL referencyjny: justifyContent property
<Style obiektu