CSS Layout: Flexbox & Grid

Az elrendezés megszűnik találgatás lenni, amint tudod, melyik rendszer melyik döntést birtokolja. Négy gyakori oldalformát építünk fel kétszer — egyszer Flexboxszal, egyszer Griddel —, hogy megérezd, melyiknél melyik a becsületes választás.

Az útvonal

1. Melyik rendszer melyik döntést birtokolja

   Tartalom- vagy konténervezérelt elrendezés, és az az egy kérdés, ami dönt köztük.

   Itt szállsz fel
   30 perc
2. Flexbox rendesen

   Fő- és keresztirány, grow/shrink/basis, és hogy miért old meg annyi mindent a `margin-left: auto`.

   30 perc
3. Grid rendesen

   Trackek, minmax, auto-fit és elnevezett területek, és hogyan hagyd abba a harcot az implicit sorokkal.

   30 perc
4. Négy oldalforma, kétszer

   Oldalsáv, holy grail, kártyasor és média-objektum — mindkettőben megépítve, hogy megérezd a különbséget.

   35 perc

Bepillantás a tanításba

/* Flexbox: the content decides. Items size themselves,
   the container distributes what is left over. */
.toolbar { display: flex; gap: 8px; }
.toolbar .spacer { margin-left: auto; }

/* Grid: the container decides. The tracks exist whether
   or not anything is in them. */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
}

Ki vezet