Vlastnost CSS align-content
Příklad
Balicí čáry směrem ke středu ohebné nádoby:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Definice a použití
Tato align-content
vlastnost upravuje chování vlastnosti
flex-wrap . Je to podobné jako
align-items , ale místo zarovnávání ohybových položek zarovnává ohybové čáry.
Poznámka: Aby tato vlastnost měla nějaký účinek, musí existovat více řádků položek!
Tip: Pomocí vlastnosti justify-content zarovnejte položky na hlavní osu (vodorovně).
Výchozí hodnota: | protáhnout se |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.alignContent="center" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- |
12.1 |
Syntaxe CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
Hodnoty vlastností
Value | Description | Play it |
---|---|---|
stretch | Default value. Lines stretch to take up the remaining space | |
center | Lines are packed toward the center of the flex container | |
flex-start | Lines are packed toward the start of the flex container | |
flex-end | Lines are packed toward the end of the flex container | |
space-between | Lines are evenly distributed in the flex container | |
space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | |
space-evenly | Lines are evenly distributed in the flex container, with equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Související stránky
CSS Reference: Vlastnost align-items
CSS reference: vlastnost align-self
CSS Reference: vlastnost justify-content
Odkaz HTML DOM: vlastnost alignContent