Mikä on CSS Flexbox?
CSS Flexbox (Flexible Box Layout) on yksiulotteinen asettelumalli tilan jakamiseen ja kohteiden tasaamiseen riveissä tai sarakkeissa. Flex-säiliö määritetään display: flex -ominaisuudella, ja sen välittömistä lapsista tulee flex-kohteita. Säiliön tärkeimmät ominaisuudet: flex-direction (rivi tai sarake), flex-wrap (yksi vs. useita rivejä), justify-content (pääakselin tasaus), align-items (poikkiakselin tasaus rivikohtaisesti) ja align-content (useiden rivien poikkiakselin tasaus). Kohteen tärkeimmät ominaisuudet: flex-grow (kuinka paljon kohde kasvaa), flex-shrink (kuinka paljon se pienenee), flex-basis (alkukoko) ja align-self (korvaa säiliön align-items tietylle kohteelle). Flexbox sopii erinomaisesti navigointipalkkeihin, korttiriveihin, keskitettyihin asetteluihin ja kaikkiin yksiulotteisiin järjestelyihin.
CSS Flexbox -generaattorin käyttöohje
-
Muokkaa säiliön ominaisuuksia (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) avattavien valikoiden ja syötekentän avulla.
-
Napsauta mitä tahansa kohdetta esikatselussa valitaksesi sen (muuttuu oranssiksi).
-
Aseta valitun kohteen flex-grow, flex-shrink, flex-basis ja align-self kohdepaneelissa.
-
Napsauta '+ Lisää kohde' lisätäksesi kohteita; napsauta 'Poista' poistaaksesi valitun kohteen.
-
Vaihda CSS- ja HTML-välilehtien välillä nähdäksesi luodun koodin, ja napsauta sitten Kopioi.
-
Napsauta 'Nollaa kaikki' aloittaaksesi alusta oletusarvoisella 3 kohteen asettelulla.