Skip to content

Latest commit

 

History

History
266 lines (169 loc) · 6.99 KB

05.1.flexbox.md

File metadata and controls

266 lines (169 loc) · 6.99 KB
title
Fyrirlestur 5.1 — Flexbox og viðmiðunarreglur

Fyrirlestur 5.1 — Flexbox og viðmiðunarreglur

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, [email protected]

Layout

  • Kom snemma í ljós að position og float var ekki nóg til að gera flókin útlit
    • Sérstaklega ekki ef það á að vera sveigjanlegt
  • Flexbox er leið til að gera „alvöru“ layout í CSS

Sagan

  • júli 2009, working draft, þá display: box;
  • mars 2011, working draft, þá display: flexbox;
  • júní 2012, working draft, þá display: flex;
  • september 2012, candidate recommendation, þá display: flex;

Flex

  • Segjum foreldri að raða börnum sínum með flexbox með display: flex
    • Eða display: inline-flex til að raða foreldri inline
  • Element með display: flex eru kölluð flex containers
  • Börn innan flexbox eru kölluð flex items

Flex items

  • margin á flex items gleypir auka pláss á alla kanta
    • margin: auto; virkar eins og við myndum gera ráð fyrir
  • Börnum er raðað eftir skilgreiningar röð í HTML, getum breytt með order: <tala>;
    • Hærri tala lætur raðast seinna
    • Sjálfgefið order: 0;

Dæmi

flex og inline-flex

Fullkomlega miðjað

Ásar

Skýringarmynd um flex ása

  • Höfum skilgreinda tvo ása
    • Aðalás (main axis)
    • Krossás (cross axis)
  • Hornréttir hvor á annan

flex-direction skilgreinir aðalás

  • row, sjálfgefið gildi, aðalás frá vinstri til hægri (eða hægri til vinstri ef texti er lesinn þannig)
  • row-reverse, aðalás frá hægri til vinstri
  • column, krossás (m.v. row) verður skilgreindur sem aðalás og öfugt. Aðalás frá toppi til botns
  • column-reverse, einsog column en aðalás frá botni til tops

Skýringarmynd um flex-direction

Flex-línur

  • Sjálfgefið er öllum flex itemum troðið á aðalás og þau minnka í samræmi til að fá pláss
  • flex-wrap breytir þessari hegðun:
    • nowrap, sjálfgefið, ekki flæða í nýja línu
    • wrap, ef það er ekki pláss, flæða í nýja línu (vinstri hægri eða hægri vinstri)
    • wrap-reverse, einsog wrap en í öfugri röð

justify-content

justify-content skilgreinir hvernig flex item er raðað á aðalás

  • flex-start, sjálfgefið, raðar við byrjun á ás
  • flex-end, raðar við enda á ás
  • center, raðar fyrir miðju áss
  • space-between, dreifir plássi milli flex itema
  • space-around, dreifir plássi milli og utanum flex flex item

Mismunandi röðun með justify-content.

align-content

align-content skilgreinir staðsetningu innan línu á krossás

  • stretch, sjálfgefið, jafnar við stærstu línu
  • flex-start, byrjun línu
  • flex-end, enda línu
  • center, miðju línu
  • baseline, jöfnuð við baseline

Mismunandi röðun með align-content.

align-self

  • Með align-self getur hvert og eitt flex item skilgreint hvernig það hagar sér m.t.t. align-items
  • Getum látið ákveðin flex item standa útúr

align-items

align-items breytir staðsetningu lína á krossás, aðeins ef flex-wrap er ekki no-wrap

  • stretch, sjálfgefið, línur teygðar til að taka allt pláss
  • flex-start, raðar við byrjun á ás
  • flex-end, raðar við enda á ás
  • center, raðar fyrir miðju áss
  • space-between, dreifir plássi milli flex itema
  • space-around, dreifir plássi milli og utanum flex item

Mismunandi röðun með align-items.

Stærðir

  • Við getum stýrt því hvernig flex item taka pláss innan flexbox með flex-grow, flex-shrink og flex-basis
  • flex-grow er rauntala, stærri en 0 og skilgreinir hvernig flex item stækkar í hlutfalli við önnur flex item, sjálfgefið er 0. „growth factor“

flex-grow

  • Ef öll hafa 1 taka þau öll jafnt pláss
  • Ef eitt hefur 2 en önnur 1, fær eitt tvisvar sinnum meira pláss (einsog hægt er) en hin rest, jafnt
  • Ef aðeins eitt hefur flex-grow skilgreint tekur það allt pláss sem önnur flex item þurfa ekki
  • flex-shrink er skilgreint einsog flex-grow en stýrir því hvern flex item minnkar, sjálfgefið er 1
  • flex-basis skilgreinir upphafsstærð á flex item, áður en plássi er dreift til flex itema, sjálfgefið er auto
  • flex er shorthand fyrir þessi þrjú eigindi, notum það yfirleitt þar sem það setur hin eigindin „rétt“ m.v. gildi

Stærðir – flex

  • initial, sjálfgefið, flex item minnka ef ekki er nóg pláss en stækka ekki umfram width og height
  • auto, stærð skv. width og height en stækkar til að fá auka pláss í flexboxi
  • none, flex item stækka hvorki né minnka
  • <tala>, tilgreinir hlutfall sem flex item fær af plássi, grow
  • <tala> <tala>, setur grow og shrink faktor
  • <tala> <tala> <tala> setur grow, shrink og basis
  • flex: 1 0 300px;
    • Upprunalega á að reikna stærð sem 300px, þessi stærð má aukast en hún má ekki minnka

Nánar

CSS í stærri verkefnum

  • Í byrjun eru CSS skrárnar okkar einfaldar og við höfum yfirsýn
  • Þurfum ekki að bæta miklu við áður en þær verða flóknar
  • Getum endað með „append only stylesheets“
    • Þorum bara að bæta við nýju CSS neðst
/* reglur skilgreindar beint á type */
button { }
/* önnur tegund notar class selector */
.button { }
/* enn önnur type og class */
button.button { }
/* eða önnur, óljós nöfn */
.button2 { }

CSS viðmiðunarreglur

Í stærri verkefnum ættum við að setja okkur viðmiðunarreglur (guidelines)

  • Hvernig nefnum við og skiptum upp hlutum?
  • Hvernig skrifum við selectora?
  • Hvernig högum við layout? Notum við grind?
  • o.s.fr.

Nokkrar tilbúnar aðferðir

  • SMACSS – Scalable and Modular Architecture for CSS
  • OOCSS – Object oriented CSS
  • SUIT CSS – Style tools for UI components
  • BEM – Block Element Modifier

BEM

Leið til að nota selectora

  • Block - hæsta stig á component, foreldrið, t.d. .button
  • Element - börn undir block, t.d. .button__price
  • Modifier - breytir block án þess að hafa áhrif almennt, t.d. .button--wide

Dæmi