CSS Flexbox -vinkkejä

CSS Flexboxin avulla voit helposti muotoilla HTML-koodisi niin kuin et koskaan tiennyt mahdollisuudesta. Flexboxin avulla voit kohdistaa helposti pysty- ja vaakasuunnassa. Pidätkö sen äänestä? Joo, niin minäkin.

Flexbox on myös erittäin hyödyllinen, kun luot verkkosivustosi tai sovelluksesi yleisen asettelun. Se on helppo oppia, tuettu (kaikissa nykyaikaisissa selaimissa) ja on hyvä työskennellä - puhumattakaan siitä, että perusteiden saaminen kestää kauan.

Joten sukelkaamme suoraan sisään ja oppimme lisää.

Flexbox

Tässä on luettelo Flexbox-ominaisuuksista, joita voidaan käyttää elementtien sijoittamiseen CSS: ssä:

CSS, jota voidaan käyttää säilöön

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, jota voidaan käyttää säilön kohteisiin / elementteihin

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Joten nyt sinulla on työkalupakki. Mutta saatat kysyä: "Mitä teen työkaluillani ja miten käytän niitä?" No, anna minun näyttää sinulle.

Näyttö Flex

display: flex;kertoo vain selaimellesi: "Hei, haluaisin käyttää Flexboxia tämän pakkauksen kanssa." Tämä alustaa tämän ruudun Flex-säilöksi ja soveltaa joitain Flex-oletusominaisuuksia.

Näin kontti näyttää ilman display: flex;:

CSS-leikkikentällä ei ole joustavia ominaisuuksia

Lisäyksen jälkeen display: flex;saamme alla olevan - näet, että käytetään oletusarvoisia Flex-ominaisuuksia, mikä saa sen näyttämään tältä:

CSS-leikkikentän joustava oletustyyli

Joustava suunta

flex-direction:antaa meille mahdollisuuden hallita, miten säilössä olevat tuotteet näytetään. Haluatko heidät vasemmalta oikealle, oikealta vasemmalle, ylhäältä alas tai alhaalta ylös? Voit tehdä kaiken tämän helposti asettamalla astian Flex-suunnan.

Flexbox käyttää rivejä suunnan oletusarvona. Näin he kaikki näyttävät:

flex-direction: row;

taipumissuunta: rivi;  esimerkki

flex-direction: row-reverse;

taipumissuunta: rivi taaksepäin

flex-direction: column;

flex-direction: sarakeesimerkki

flex-direction: column-reverse;

joustava suunta: sarakkeen käänteinen esimerkki

Flex Wrap

Flexbox yrittää oletusarvoisesti sijoittaa kaikki elementit yhdelle riville. Mutta voit muuttaa tätä flex-wrap -ominaisuudella. Tämän avulla voit valita, leviävätkö elementit vai eivät.

On 3 ominaisuutta flex-wrap::

flex-wrap: nowrap on oletusarvo ja yrittää sijoittaa kaiken yhdelle riville vasemmalta oikealle.

flex-wrap: wrap antaa kohteiden jatkaa luoda useita rivejä vasemmalta oikealle.

flex-wrap: wrap-reverse sallii kohteiden olla useilla riveillä, mutta näyttää oikealta vasemmalle tällä kertaa.

Joustava virtaus

Flex flow yhdistää käytön flex-wrapja flex-directionyhdeksi ominaisuudeksi. Sitä käytetään asettamalla ensin suunta ja sitten kääre.

flex-flow: column wrap; on esimerkki siitä, miten tätä käytetään.

Perusta sisältö

justify-content on ominaisuus, joka kohdistaa säiliön kohteet pääakselia pitkin (tämä muuttuu sisällön näyttötavan mukaan).

Tähän on useita vaihtoehtoja. Sen avulla voimme täyttää kaikki tyhjät tilat riveillä, mutta antaa meille mahdollisuuden määritellä, miten haluamme "perustella" sen.

Tässä ovat vaihtoehtoja, kun voimme perustella meidän sisältöä: flex-start | flex-end | center | space-between | space-around;.

Kohdista kohteet

Kohdista kohteet avulla voimme kohdistaa kohteita poikittaisakselilla. Tämä mahdollistaa sisällön sijoittamisen monin eri tavoin perustellun sisällön avulla ja tasaa kohteet yhteen.

align-items: flex-start | flex-end | center | baseline | stretch;

Tasaa sisältö

Tämä on kohteiden kohdistamiseksi useiden rivien kanssa. Se on kohdistettu poikkiakselille, eikä sillä ole vaikutusta sisältöön, joka on yksi rivi.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Muut Flexbox- ja Grid-resurssit

Artikkelit ja kurssit

Ultimate CSS Flex -huijausarkki

Koko CSS-videokurssi (sisältää Flexboxin ja Gridin)

Visuaalinen opas CSS Flexboxiin

Kuvagallerian luominen CSS-ruudukolla

Pelit ja sovellukset

Flexbox Defense on verkkopeli, joka opettaa flexboxille hauskaa.

Flexbox Froggy on myös verkkopeli, joka opettaa flexboxille hauskaa.

Flexbox in 5 on verkkosovellus, jonka avulla voit nähdä muutaman yksinkertaisen ohjaimen avulla, miten flexbox toimii.

Flexyboxes on sovellus, jonka avulla voit nähdä koodinäytteitä ja muuttaa parametreja nähdäksesi, miten flexbox toimii visuaalisesti.

Flexbox Patters on verkkosivusto, joka näyttää runsaasti flexbox-esimerkkejä.

Videot

Flexbox Essentials

Flexbox-käytännön esimerkkejä

Mitä Flexbox ?!