CSS Flex — En interaktiv tutorial

Du kan følge mig på Twitter for at få tutorials, JavaScript-tip osv.

Hvis du selv vil eksperimentere med det, skal du gå til live flex layout maker nu for at lave dine egne flex layouts.

Jeg har overgået stort set hver eneste eksisterende Flex-tutorial fra froggy til den officielle W3C-dokumentation. Men der er en ting, du aldrig vil lære om Flex uden et interaktivt eksempel: egenskabernes opførsel, når størrelsen på en * individuel vare ændres. Du kan se, hvad jeg mener nedenfor.

Tjek CSS Visual Dictionary med alle CSS egenskaber forklaret visuelt.

Jeg oprettede dette nye Flex-værktøj natten over og forbedrede det i løbet af de næste par dage. Resten af ​​denne tutorial vil give et par indblik i, hvad jeg opdagede, mens jeg legede med det!

Hvad jeg lærte om Flex, mens jeg designede Flex Generator

Der er et par interessante påfald om flex, der måske ikke altid er indlysende i starten. For eksempel strækker de sig ikke og opfører sig ikke som flex-start, selvom der ikke anvendes stræk. Nedenfor vil jeg lede dig gennem resten af ​​dem.

Her er de komplette visuelle eksempler

Fortsæt med at læse, hvis du vil forbruge denne tutorial visuelt!

Jeg viser alle mulige sager og kort diskuterer de Flex-påfald, jeg fandt, at du måske vil vide om (eller på et tidspunkt vil snuble ind i).

flex-start

Flex-start-værdien er standard. Der er virkelig ikke meget her bortset fra, at det ligner meget, at den langsomt bliver forældede flyder: venstre:

flex-start

flex-ende

Værdien for flex-end opfører sig som float: højre; Her er to poster:

flex-ende

centrum

Husk tilbage den dag, hvor du instinktivt skrev float: center, men blev skuffet over, at der ikke skete noget i browseren? Fleks til redningen. Centerværdien fungerer som du ville forvente:

flex-center

rum-mellem

Rummet mellem, mellemrum (næste) og mellemrum ser ud til at give lignende resultater i starten. Men prøv at ændre antallet af varer. Derefter bliver det tydeligt, at de tre layoutindstillinger har unikke egenskaber.

rum-mellem

space-around

space-around

rum-jævnt

rum-jævnt

Og endelig…

strække

Strækværdien er lidt finurlig. Det strækker kun genstande, hvis de er store nok. Hvad jeg mener med "stort nok" er normalt mindst 100% af beholderen. Prøv at gøre dem mindre. Du vil se, at varerne begynder at flyde til venstre igen, som med flex-start, selvom de ikke er til stede:

rum-jævnt

Endelig er der også en separat version af flex-editoren. Den indeholder kun en række, men har desuden knapper og udvid knapper.

Fordi undertiden krympning af bredden ændrer alt. Elementer kan begynde at opføre sig meget som stræk, selvom det ikke er indstillet. Men det er naturligt at arbejde med Flex. Bare noget at være opmærksom på:

Interaktiv Flex layout builder blev designet specifikt til at hjælpe med at lære flex adfærd under forskellige forhold, når størrelsen på hver enkelt artikel ændres i realtid. Du kan teste live-demoen på mit websted. For at begynde at udforme dine egne flexlayouts skal du gå til live flex layout maker nu. (Andre CSS-værktøjer er også der.)

På samme måde hjælper denne Flex-generator dig med at lære adfærd ved flexlayouts ved interaktivt at ændre egenskaben med retfærdiggørelse af indhold, ændre antallet af genstande og trække og droppe (krympe eller strække) bredden af ​​hvert enkelt emne.

Tidsbegrænset tilbud

Diagrammerne i denne tutorial blev påvirket direkte af manuskriptet!

CSS Visual Dictionary 28% FRA for mellemstore læsere.

28% FRA

Kun mellemlæsere:

CSS Visual Dictionary

== tag en kopi ==

Indeholder alle CSS-egenskaber