Flexbox rafall

Hér á eftir er farið yfir hvernig tól eins og Flexbox rafall nýtist við hönnun á vefútliti, hvernig eiginleikar flex-gáma og einstakra eininga virka saman, og hvernig hægt er að nýta þessar stillingar til að búa til sveigjanlega hönnun.

Hvað gerir Flexbox rafall?

Þetta tól gerir notanda kleift að setja upp flex-gám (flex container) og einingar hans á myndrænan hátt. Með því að nota stýringar tólsins skilgreinir notandinn útlitið, fylgist með breytingunum í rauntíma í gagnvirku forskoðuninni og afritar svo tilbúna CSS-kóðann fyrir hönnun sína.

Tólið nýtist sérstaklega vel fyrir:

• Þá sem vilja hanna CSS flexbox-útlit á myndrænan hátt.
• Þá sem þurfa að búa til CSS-kóða fljótt fyrir flex-gám og einingar hans.
• Þá sem vilja skilja áhrif mismunandi flexbox-eiginleika á útlit.
• Þá sem eru að búa til algeng útlit, svo sem miðjaðan hlut, valstiku, stafla af hlutum, spjöld eða hliðarstiku.

Stillingar fyrir gám (container)

Í tólunum er hægt að stjórna eftirfarandi eiginleikum flex-gámsins:

• Stefna (direction): Ákveður hvernig einingarnar raðast. Hægt er að velja um:
  • Röð (Row)
  • Röð öfugt
  • Dálkur
  • Dálkur öfugt
• Línuskipting (wrap): Stýrir því hvort einingar neyðast á eina línu eða færast yfir á nýjar línur. Valmöguleikar eru:
  • Engin línuskipting
  • Línuskipting
  • Línuskipting öfugt
• Jafna flæði (justify-content): Stýrir jöfnun meðfram aðalásnum. Hægt er að velja:
  • Byrjun
  • Endi
  • Miðja
  • Pláss á milli
  • Pláss í kring
  • Jafnt pláss
• Jafna einingar (align-items): Stýrir jöfnun eininga þvert á aðalásinn. Valmöguleikar eru:
  • Byrjun
  • Endi
  • Miðja
  • Teygja
  • Grunnlína
• Jafna innihald (align-content): Stýrir jöfnun lína í gámi þegar línuskipting er virk. Valmöguleikar eru:
  • Byrjun
  • Endi
  • Miðja
  • Teygja
  • Pláss á milli
  • Pláss í kring
  • Jafnt pláss
• Bil (gap): Tekur við tölulegu gildi sem ákveður bilið á milli eininga og á milli lína.

Stillingar fyrir einstakar einingar (items)

Hægt er að fínstilla hverja einingu fyrir sig með eftirfarandi gildum:

• Röðun (order): Tölulegt gildi sem stýrir röðun einingarinnar í gámnum.
• Stækkun (grow): Tölulegt gildi sem ákveður hversu mikið einingin má stækka til að fylla laust pláss.
• Minnkun (shrink): Tölulegt gildi sem ákveður hversu mikið einingin má minnka þegar plássið er af skornum skammti.
• Grunnstærð (basis): Tölulegt gildi eða „Sjálfgefin grunnstærð (auto)“ sem skilgreinir upphafsstærð einingarinnar áður en plássi er dreift.
• Jafna sjálft (align-self): Gerir einstakri einingu kleift að hnekkja jöfnun gámsins þvert á ásinn. Valmöguleikar eru:
  • Sjálfvirkt (Auto)
  • Byrjun
  • Endi
  • Miðja
  • Teygja
  • Grunnlína

Reglur og virkni tólsins

Þegar unnið er í raflinum gilda ákveðnar reglur um hvernig viðmótið og CSS-kóðinn hegða sér:

• Bæta við einingum: Þegar smellt er á „Bæta við einingu“ birtist ný eining í forskoðuninni, til dæmis „Eining 5“.
• Afritun kóða: Þegar smellt er á hnappinn „Afrita CSS“ breytist staða hans í „Afritað“.
• Sértækur CSS-kóði: Aðeins þær einingar sem hafa fengið breyttar stillingar munu fá sínar eigin CSS-reglur í úttakinu.
• Víxlun ása: Ef stefnunni (direction) er breytt úr röð (row) yfir í dálk (column) víxlast aðalásinn og þverásinn. Þetta hefur bein áhrif á hvernig eiginleikarnir justify-content og align-items virka.
• Línuskipting: Ef slökkt er á línuskiptingu (wrap) neyðast allar einingar til að vera á einni og sömu línunni. Þegar kveikt er á línuskiptingu munu þær einingar sem komast ekki fyrir færast niður á næstu línu. Í þeim tilfellum stýrir align-content bilinu á milli þessara lína sem heild.
• Bilið (gap): Eiginleikinn gap skilgreinir bilið á milli eininganna sjálfra og á milli línanna sem myndast.

Persónuvernd og vinnsla gagna

Öll hönnun og uppsetning á útliti fer fram beint í vafra notandans. Engu af því sem notandinn stillir eða setur upp í tólinu er hlaðið upp á netþjóna.

---

Algengar spurningar

Hver er munurinn á justify-content og align-items?

Justify-content dreifir einingunum eftir aðalásnum — áttinni sem röðin eða dálkurinn flæðir í — á meðan align-items staðsetur þær þvert á hinn ásinn. Ef þú breytir stefnunni úr röð (row) í dálk (column) víxlast ásarnir tveir, þannig að justify-content fer að virka ofan frá og niður og align-items frá vinstri til hægri.

Hvernig virka stillingarnar fyrir hverja einingu?

Veldu einingu eftir númeri hennar og stilltu svo hversu mikið hún stækkar (grow) til að fylla laust pláss, hversu mikið hún minnkar (shrink) þegar þröngt er um hana, upphafsstærð herrar (basis) og eigin jöfnun þvert á ásinn. Röðun (order) færir einingu framar eða aftar á skjánum án þess að snerta HTML-kóðann. Aðeins þær einingar sem þú breytir fá sína eigin reglu í CSS-kóðanum.

Hvenær skipta wrap og align-content máli?

Þegar slökkt er á línuskiptingu (wrap) neyðast allar einingar á eina línu og geta þrengst saman. Þegar kveikt er á henni færast einingar sem komast ekki fyrir niður á næstu línu — það er þá sem align-content tekur við og stýrir bilinu á milli línanna sem heild. Gap stillir bilið á milli eininga og á milli lína, án þess að nota margin.