CSS Flex - interaktivni udžbenik

Možete me pratiti na Twitteru da biste dobili vodiče, JavaScript savjete itd.

Ako želite eksperimentirati s njim, idite sada na proizvođač fleksibilnog izgleda uživo kako biste sami napravili savitljivi izgled.

Pregledao sam poprilično svaki postojeći udžbenik Flex, od žabica do službene W3C dokumentacije. Ali postoji jedna stvar o kojoj nikad nećete saznati o Flexu bez interaktivnog primjera: ponašanje svojstava kada se veličina * pojedinog predmeta promijeni. U nastavku možete vidjeti što mislim.

Pogledajte CSS Visual Dictionary sa svim CSS svojstvima koja su vizualno objasnjena.

Stvorio sam ovaj novi alat Flex preko noći i unaprijedio ga u narednih nekoliko dana. Ostatak ovog vodiča pružit će nekoliko uvida u ono što sam otkrila dok sam se igrala okolo!

Što sam naučio o Flex-u dok sam dizajnirao Flex generator

Postoji nekoliko zanimljivih zamišljanja fleksibilnosti koja u početku možda nisu uvijek očita. Na primjer, uski predmeti se ne istežu i ponašaju se poput fleksibilnog starta, čak i ako se primjenjuje rastezanje. Ispod ću vas provesti kroz njih.

Evo cjelovitih vizualnih primjera

Nastavite čitati ako ovaj udžbenik želite konzumirati vizualno!

Prikazat ću sve moguće slučajeve i ukratko raspraviti o fleksijem koje smo otkrili o kojima biste možda željeli znati (ili će se u nekom trenutku na njih naići.)

Flex-početak

Vrijednost fleksibilnog pokretanja je zadana. Stvarno nema ovdje puno, osim što liči na polako zastareli plov: levo:

Flex-početak

Flex-end

Vrijednost flex-enda ponaša se slično kao pluta: ispravno; Ovdje su dvije stavke:

Flex-end

centar

Sjećate se onog dana kada ste nagonski upisali plutajući: centar, ali bili razočarani činjenicom da se u pregledniku nije dogodilo ništa? Fleks u pomoć. Središnja vrijednost djeluje onako kako biste očekivali:

Flex-centar

prostor između

Isprva se čini da razmak između, prostora oko (sljedećeg) i prostora jednako daje rezultate. Ali pokušajte promijeniti broj predmeta. Tada postaje očito da tri mogućnosti izgleda imaju jedinstvena svojstva.

prostor između

prostor oko

prostor oko

Prostor-jednolično

Prostor-jednolično

I konačno…

rastezanje

Vrijednost rastezanja je pomalo čudna. Predmete rasteže samo ako su dovoljno veliki. Ono što mislim pod "dovoljno velikim", obično je najmanje 100% spremnika. Pokušajte ih učiniti manjim. Vidjet ćete da stavke ponovo počinju plutati lijevo, poput fleksibilnog starta, iako nije prisutan:

Prostor-jednolično

Konačno, postoji i zasebna inačica flex uređivača. Sadrži samo jedan red, ali osim toga, ima gumbe za skupljanje i proširivanje.

Jer ponekad smanjivanje širine sve mijenja. Predmeti se mogu početi ponašati poput istezanja, iako nisu postavljeni. Ali to je prirodno raditi s Flexom. Samo treba imati na umu:

Interaktivni graditelj Flex izgleda dizajniran je posebno da pomogne naučiti ponašanje fleksibilnih u različitim uvjetima kada se veličina svakog pojedinog predmeta mijenja u stvarnom vremenu. Demo test možete testirati na mojoj web stranici. Da biste započeli s izradom vlastitih fleksibilnih izgleda, idite sada na live flexer. (Ostali CSS alati također su tamo.)

Na isti način ovaj Flex generator pomaže vam da naučite ponašanje fleksibilnih rasporeda interaktivnom izmjenom svojstva sadržaja opravdanja, izmjenom broja predmeta te povlačenjem i ispuštanjem (smanjivanjem ili istezanjem) širine svake pojedine stavke.

Vremenski ograničena ponuda

Na dijagrame u ovom udžbeniku utjecao je izravno rukopis!

CSS vizualni rječnik 28% OFF za srednje čitatelje.

28% OFF

Samo za srednje čitatelje:

CSS vizualni rječnik

== zgrabite kopiju ==

Sadrži sva CSS svojstva