A Complete Guide flexbox
előszó
Flexbox Layout (Flexible Box) modul célja, hogy hatékonyabb módon irányban, összehangolása és elosztása közötti szabad tér elemei a tartályban, akkor is, ha azok mérete nem ismert előre és / vagy dinamikus (innen a „flex”).
Az alapötlet egy rugalmas (flex) jelölést az, hogy a tartály egy lehetőséget, hogy módosítsa a szélesség / magasság (és sorrendben) eleme, annak érdekében, hogy a legjobban kitöltik a rendelkezésre álló teret (elsősorban egy, az összes típusú és méretű képernyők). Flexbox tartály kiterjeszti az elemeket, hogy töltse ki helyet, vagy tömöríteni őket túlfolyás elkerülése.
A legfontosabb, hogy arra irányul flexbox agnosztikus ellentétben a hagyományos elrendezés (blokkok alapján a függőleges elhelyezése húr elemek alapján, valamint vízszintes elhelyezését). Annak ellenére, hogy jól fut, nincsenek meg a rugalmasságot, hogy támogassa a nagy és komplex programok (különösen, ha beszélünk tájolásának megváltoztatása, átméretezés, nyújtás, összenyomás, és így tovább. D.).
Megjegyzés. Flexbox több alkalmas alkalmazás-összetevők és a kis modell, míg a CSS Rács tervezték nagyobb elrendezés.
Alapok és terminológia
Mivel flexbox - egy egész helyett külön tulajdon, tartalmaz egy csomó más dolgot, beleértve egy sor tulajdonságot. Néhány ezek közül beépítésre tervezték a tartály (szülő elem, az úgynevezett „flex-tartály”), a másik telepíteni kell a gyermek elemek (az úgynevezett „flex-tételek”).
Ha a hagyományos elrendezés alapuló rendszer blokk és inline irányok, flexbox alapján a „Flex-áramlási irányban.” Kérjük, nézze meg ezt a képet a leírás, amely megmagyarázza az alapötlet flexbox.
Alapvetően, az elemek lesz található fő tengelye mentén a (a fő-start egy fő-vége), vagy poperechenoy tengely (cross-start egy kereszt-end).
- főtengelye - a fő tengelye Flex-tartály, amely mentén a Flex-elemek. Vigyázni kell, hogy ez nem feltétlenül a vízszintes tengely; Ez attól függ, a tulajdonságok a Flex-irányba;
- fő-start | fő-end - Flex-elemek tartály belsejében elhelyezett, mivel fő-start és végződő fő-end;
- fő mérete - szélessége vagy magassága a Flex-elem, attól függően, hogy az irányt a fő tengely;
- kereszttengely - merőleges tengely a nagytengely, amely az úgynevezett „keresztirányú” tengelyen. A irány függ az irányt a fő tengely;
- cross-Start | cross-end - - flex-elemek tartály belsejében elhelyezett, mivel a határokon kezdete és vége kereszt-end;
- kereszt mérete - szélessége vagy magassága a Flex-elem, attól függően, hogy az irányt a keresztirányú tengely;
böngésző támogatása
Osztva változatok flexbox: