Align-self: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
Rad 31: Rad 31:


== Exempel ==
== Exempel ==
[http://exempel.webbling.se/flexbox11.html Exempel].
<codepen pen="doBNWJ" height="200" tab="css">
<codepen pen="doBNWJ" height="200" tab="css">
</codepen>
</codepen>

Versionen från 21 augusti 2015 kl. 14.37

Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Används om enstaka flexföremål ska ha andra inställningar än de som satts i align-items (vilket ju gäller för alla föremål i flexbehållaren).

Se denna sektion för mer utförlig information.

Egenskaper

Parametrar flex-start | flex-end | center | baseline | stretch
Defaultvärde stretch
Ärvs? Nej
Animerbart? Nej
Fungerar med... Flexbehållare

flex-start flexföremålets toppkant flyttas mot korsaxelns start.

flex-end flexföremålets bottenkant flyttas mot korsaxelns slut.

center flexföremålets center justeras mellan korsaxelns start och slut.

baseline allt flexföremålets justeras så att deras baslinjer sammanfaller.

stretch flexföremålets sträcks ut längs hela korsaxeln.

Exempel

See the Pen doBNWJ by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition

http://dev.w3.org/csswg/css3-flexbox/#align-self