A Complete Guide flexbox

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:

Kapcsolódó cikkek