Innehållsförteckning:

Hur använder du Flexbox och rutnät?
Hur använder du Flexbox och rutnät?

Video: Hur använder du Flexbox och rutnät?

Video: Hur använder du Flexbox och rutnät?
Video: Flexbox or grid - How to decide? 2024, November
Anonim

Vi har arrangerat element som rader och kolumner på webben sedan vi Begagnade tabeller för layout. Både flexbox och galler bygger på detta koncept. Flexbox är bäst för att ordna element i antingen en enda rad eller en enda kolumn. Rutnät är bäst för att ordna element i flera rader och kolumner.

I efterhand kan man också fråga sig, kan man använda Flexbox och grid tillsammans?

Mestadels Nej. Rutnät är mycket nyare än Flexbox och har lite mindre webbläsarstöd. De burk arbete tillsammans : a rutnät Artikel burk vara en flexbox behållare. A böja Artikel burk vara en rutnät behållare.

På samma sätt, är CSS grid bättre än Flexbox? CSS-rutnät är för 2D-layouter. Det fungerar med både rader och kolumner. Flexbox Arbetar bättre endast i en dimension (antingen rader ELLER kolumner). Det kommer att vara Mer tidsbesparande och användbart om du använder båda samtidigt.

Följaktligen, vad är Flexbox grid?

Flexbox är gjord för endimensionella layouter och Rutnät är gjord för tvådimensionella layouter. Det betyder att om du lägger ut föremål i en riktning (till exempel tre knappar inuti en rubrik), bör du använda Flexbox : Det kommer att ge dig mer flexibilitet än CSS Rutnät.

När ska du inte använda Flexbox?

När ska man inte använda flexbox

  1. Använd inte flexbox för sidlayout. Ett grundläggande rutsystem som använder procentsatser, maxbredder och mediefrågor är ett mycket säkrare tillvägagångssätt för att skapa responsiva sidlayouter.
  2. Lägg inte till display:flex; till varenda container div.
  3. Använd inte flexbox om du har mycket trafik från IE8 och IE9.

Rekommenderad: