Flexbox-generaattori
Aseta ominaisuudet ja lue selkokielellä, mitä ne oikeasti tekevät.
- Toimii selaimessasi — tekstiäsi ei lähetetä minnekään
- Ei rekisteröitymistä, ei kiintiöitä, ilmainen käyttää niin usein kuin haluat
Näin se toimii
Flexbox ei ole monimutkainen, mutta yksi asia siinä yllättää lähes kaikki: justify-content ja align-items eivät tarkoita vaakaa ja pystyä. Ne tarkoittavat suunnan mukaan ja sitä vastaan, ja suunta on jotain, minkä itse asetat.
Ansa suoraan sanottuna
Kun flex-direction: row, justify-content toimii vaakasuunnassa ja align-items pystysuunnassa. Vaihda arvoon column, ja ne vaihtavat paikkaa kokonaan. Jokainen flexboxiin hukattu tunti on olennaisesti tämä. Alla oleva selitys päivittyy suuntaa muuttaessasi, jotta suhde on näkyvä eikä ulkoa opeteltu.
Pääakseli ja poikkiakseli
Pääakseli on se, jota pitkin kohteet virtaavat, ja se asetetaan flex-directionilla. Poikkiakseli on sitä vastaan kohtisuorassa. justify-content jakaa tilaa pääakselin suuntaan; align-items sijoittaa kohteet poikkiakselille. Kun nämä kaksi nimeä jäävät mieleen, loput seuraa.
gap ja miksi se korvasi marginit
gap laittaa tilaa kohteiden väliin lisäämättä sitä ensimmäisen ja viimeisen ulkopuolelle, mikä on juuri se, minkä marginit tekevät väärin ja minkä ihmiset ennen korjasivat :last-child-kikoilla. Se on tuettu kaikissa nykyisissä selaimissa, eikä sen välttämiseen ole enää syytä.
nowrap tarkoittaa kutistumista, ei ylivuotoa
Oletus on nowrap, ja kohteet kutistuvat luonnollisen kokonsa alle mahtuakseen sen sijaan, että siirtyisivät uudelle riville. Siksi teksti joskus litistyy odottamattomasti flex-rivin sisällä. Wrap-arvon asettaminen antaa kohteiden siirtyä alas; min-width: 0 lapselle estää sitä kutistumasta sisältöään pienemmäksi.
Keskitys molempiin suuntiin
justify-content: center ja align-items: center keskittää kohteen molempiin suuntiin flex-directionista riippumatta, mikä on ainoa yhdistelmä, joka kannattaa opetella ulkoa sellaisenaan.
Flexbox-generaattori – kysymyksiä
Miksi align-items siirtää asioita vaakasuunnassa?
Koska flex-direction on column. Nämä kaksi ominaisuutta seuraavat suuntaa, eivät näyttöä.
Mikä on pää- ja poikkiakselin ero?
Pääakseli on suunta, johon kohteet virtaavat, ja se asetetaan flex-directionilla. Poikkiakseli on sitä vastaan kohtisuorassa.
Miten keskitän jotain molempiin suuntiin?
justify-content: center yhdessä align-items: center kanssa.
Miksi tekstini on litistynyt?
Oletus nowrap kutistaa kohteet mahtumaan. Aseta flex-wrap: wrap tai min-width: 0 lapselle.
Voinko käyttää gapia flexboxin kanssa?
Kyllä, kaikissa nykyisissä selaimissa. Se on parempi kuin marginit, koska se ei lisää tilaa päihin.