Kafli 17: Flexbox

Það kom snemma í ljós að noktun á visual formatting model með position og float var ekki nóg til að gera flókin útlit. Sérstaklega getur verið erfitt að nota það til að útbúa útlit þar sem hlutir voru jafn háir eða eru miðjaðir lóðrétt innan foreldris. Flexbox var búið til með það að leiðjarljósi að einfalda gerð flókinna útlita og bjóða upp á meiri sveigjanleika.

Í júli 2009 kom fyrsta útgáfa af staðlinum sem kynnti til leiks display: box; sem síðan í mars 2011 breyttist í display: flexbox; sem að lokum endaði í display: flex; árið 2012 þegar fyrsta candidate recommendation kom út. Stuðningur við flexbox (með vafraforskeytum) er í dag mjög mikill og er aðalleiðin til þess að útbúa útlit í dag.

Flexbox er skilgreint með því að setja display eigindið display: flex; en þá er element í eðlilegu flæði og börnum þess er raðað með flexbox. Einnig er hægt að setja display: inline-flex; en þá er element túlkað inline í eðlilegu flæði en börnum þess raðað með flexbox. Þegar börnum elements er raðað með flexbox er margin á alla kanta gleypt með auto, ekki bara lárétt.

Börn elements sem er raðað með flexbox eru kölluð flex items. Þau raðast sjálfgefið í þeirri röð sem þau eru skilgreind í HTML en við getum breytt þeirri röðun með order eigindinu. Hægt er að skilgreina order fyrir hvert flex item og er þeim síðan raðað þar sem hærri tala raðar flex item seinna. Sjálfgefið gildi er order: 0;.

Þegar flexbox er notað til að skilgreina útlit er mikilvægt að gera greinarmun á elementi sem hefur display: flex; (flexbox/flex container) og börnum þess (flexbox/flex items). Það mun ekki virka að skilgreina flexbox eigindi fyrir container á flex items en það er hinsvegar hægt að láta flex items væra bæði flex item og flex container.

Í flexbox eru skilgreindir tveir ásar, aðalás (e. main axis) og krossás (e. cross axis) sem eru hornréttir hvorn annan. Með því að nota flex-direction getum við skilgreint aðalásin:

Athugið að ekki er skilgreint með heitum á áttum (t.d. left) þar sem flexbox á að virka óháð því hvort verið sé að teikna útlit þar sem lesið er frá vinstri til hægri, hægri til vinstri eða frá toppi niður. Þetta heldur áfram í CSS staðli fyrir logical properties þar sem búið er að bæta við lógískum heitum við hluti sem hafa beina vísun í vídd eða átt. block og inline er notað sem grunn hugtök um í hvaða átt texti flæðir ásamt start og end, t.d. margin-inline-start: 1px; eða border-block-start-width: 1px;.

Sjálfgefið er öllum flex itemum troðið á aðalás og þau minnka í samræmi til að fá pláss. Hægt er að nota flex-wrap til að láta flex item flæða í nýja flex-línu ef ekki er nóg pláss:

Til að skilgreina hvernig flex item er raðað á aðalás notum við justify-content:

Staðsetningu innan línu á krossás er skilgreind með align-items:

Með align-self getur hvert og eitt flex item skilgreint hvernig það hagar sér m.t.t. align-items.

Til að breyta staðsetningu lína á krossás notum við align-content, en það hefur því aðeins áhrif ef flex-wrap er ekki no-wrap.

Við getum stýrt því hvernig flex item taka pláss innan flexbox með flex-grow, flex-shrink og flex-basis.

Við skilgreinum flex-grow með rauntölu, stærri en 0 og skilgreinir hvernig flex item stækkar, sjálfgefið er 0.

Við skilgreinum flex-shrink eins og flex-grow en það stýrir því hvern flex item minnkar, sjálfgefið er 1.

Upprunastærð á flex item er skilgreind með flex-basis, þá getum við skilgreint hversu mikið pláss flex item á að taka áður en plássi er dreift til flex itema, sjálfgefið er auto.

Þessi þrjú eigindi ætti alltaf að skilgreina með flex eigindi en það stillir óskilgreind gildi rétt m.v. sett gildi. Í flestum tilfellum ætti að vera nóg að setja gildið sem: