CSS vlastnosti
align-content
- Zobrazeno: 1300
Definice a použití
CSS vlastnost align-content zarovná flexibilní HTML elementy podle vedlejší osy (tzn. osy kolmé na osu hlavní) pokud se okolo flexibilních HTML elementů nachází volné místo. Vlastnost má efekt pouze na HTML elementy, které jsou dceřinnými elementy elementu s display nastaveným na flex nebo inline-flex a nemá vliv na flexibilní HTML elementy, které nejsou zalomené na více než jeden řádek.
CSS Syntaxe
align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit
| Hodnoty | Popis |
|---|---|
| stretch | roztáhne flexibilní elementy, aby zabíraly zbytek volného místa (výchozí hodnota) |
| center | zarovná flexibilní HTML elementy na střed |
| flex-start | zarovná flexibilní HTML elementy od začátku |
| flex-end | zarovná flexibilní HTML elementy od konce |
| space-between | mezery jsou stejnoměrně rozděleny mezi flexibilní HTML elementy |
| space-around | mezery jsou stejnoměrně rozděleny okolo flexibilních HTML elementů |
| initial | nastaví tuto vlastnost na výchozí hodnotu |
| inherit | zdědí tuto vlastnost od jeho rodičovského elementu |
Ukázka použití
HTML element se zarovná směrem ke středu.
CSS:
div {
width: 80px;
height: 350px;
border: 1px solid #000000;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Připojení na Twitter
