Flexbox-generaattori
Reaaliaikainen esikatselu
Miksi käyttää visuaalista Flexbox-generaattoria?
CSS Flexboxissa on monia vuorovaikuttavia ominaisuuksia ja yhdistelmät voivat olla monimutkaisia. Visuaalisella generaattorilla voit säätää kutakin ominaisuutta pudotusvalikkojen kautta ja nähdä asettelun päivittyvän reaaliajassa.
Reaaliaikainen esikatselu
Näe tarkalleen mitä Flexbox-asettelu tekee kunkin ominaisuuden muutoksessa — ei arvausta
Kaikki ominaisuudet
flex-direction, justify-content, align-items, flex-wrap ja gap yhdessä käyttöliittymässä
Käyttövalmis CSS
Kopioi siisti .container {} CSS-lohko suoraan tyylitiedostoosi liitettäväksi
Flexbox-asettelun luominen
Aseta suunta ja rivittäminen
Valitse flex-direction (rivi/sarake) ja flex-wrap pääakselin ja ylivuodon hallitsemiseksi
Säädä elementtien tasaus
Säädä justify-content ja align-items elementtien jakelun ja tasauksen hallitsemiseksi
Kopioi CSS
Napsauta 'Kopioi CSS' saadaksesi täydellinen .container CSS-lohko käytettäväksi projektissasi
Flexbox-käyttötapaukset
Navigointipalkki
Flexbox on ihanteellinen vaakasuorille navigointipalkeille justifyContent:space-between logo+linkeille
Korttiruudukko
Luo responsiivinen korttiruudukko flex-wrap:wrap ja kiinteällä flex-basis-arvolla
Täydellinen keskitys
justifyContent:center + alignItems:center — helpoin tapa keskittää mikä tahansa elementti
Lomakkeen asettelu
Tasaa selitteet ja lomakekentät vaakasuoraan tai pystysuoraan siisteihin lomakkeisiin Flexboxin avulla
Flexboxin parhaat käytännöt
✓ Ymmärrä pää- ja ristikkäisakseli
justify-content hallitsee pääakselia (rivi=vaakasuora). align-items hallitsee ristikkäisakselia. Vaihtuu kun flex-direction:column on käytössä.
✓ Käytä flex:1 kasvaviin elementteihin
Lisää flex:1 flex-elementtiin laajentaaksesi sen täyttämään saatavilla olevan tilan.
✓ Käytä gap marginaalien sijaan
gap-ominaisuus luo tasaisen välin flex-elementtien välille lisäämättä marginaaleja ulkoreunoihin.
✓ Käytä Gridiä 2D-asetteluihin
Flexbox hallitsee kerrallaan yhtä akselia. Käytä CSS Gridiä kaksiulotteisiin asetteluihin.
❓ Usein kysytyt kysymykset
Milloin käyttää Flexboxia CSS Gridin sijaan?
Flexbox on ihanteellinen yksiulotteisiin asetteluihin (navigointipalkit, painikejoukot, lomakerivit). CSS Grid menestyy kaksiulotteisissa asetteluissa, joissa hallitset sekä rivejä että sarakkeita samanaikaisesti.
Mitä flex-wrap:wrap tekee?
Oletuksena flex-elementit pakotetaan yhteen riviin, vaikka ne valuisivat yli. flex-wrap:wrap sallii elementtien siirtyä seuraavalle riville ylivuodon yhteydessä — tärkeää responsiivisille asetteluille.
Mikä on ero align-items ja align-content välillä?
align-items tasaa flex-elementit yhdellä rivillä. align-content koskee vain useita rivejä (flex-wrap:wrap) ja hallitsee rivien jakautumista säiliössä.
Miten luodaan yhdenleveysiset sarakkeet Flexboxilla?
Sovella flex:1 kuhunkin sarakkeeseen. Se laajentaa ne täyttämään saatavilla olevan tilan tasaisesti. Käytä flex:0 0 33,33% tarkasti kolmelle samankokoiselle sarakkeelle sisällöstä riippumatta.