Obsah:

Čo je kontajner Flexbox?
Čo je kontajner Flexbox?

Video: Čo je kontajner Flexbox?

Video: Čo je kontajner Flexbox?
Video: #36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial 2024, November
Anonim

A ohybná nádoba rozšíri položky tak, aby zaplnili dostupné voľné miesto, alebo ich zmenší, aby sa zabránilo pretečeniu. Najdôležitejšie je, že flexbox rozloženie je orientované agnostické na rozdiel od bežných rozložení (blok, ktorý je založený na vertikále a inline, ktorý je založený na horizontále).

Ako v tejto súvislosti používate Flexbox?

Zhrnutie

  1. Použite displej: flex; na vytvorenie ohybnej nádoby.
  2. Použite justify-content na definovanie horizontálneho zarovnania položiek.
  3. Použite align-items na definovanie vertikálneho zarovnania položiek.
  4. Ak potrebujete stĺpce namiesto riadkov, použite ohybný smer.
  5. Na prevrátenie poradia položiek použite hodnoty prevrátenia riadka alebo stĺpca.

ako vyrobíte nádobu Flex? Predtým, ako budete môcť použiť akýkoľvek flexbox vlastnosť, musíte definovať a ohybná nádoba vo vašom rozložení. vy vytvorte flexibilnú nádobu nastavením vlastnosti display prvku na jednu z flexbox hodnoty rozloženia: flex alebo inline- flex . Predvolene, flex položky sú rozložené vodorovne na hlavnej osi zľava doprava.

Na čo sa Flexbox týmto spôsobom používa?

Flexbox je model rozloženia, ktorý umožňuje prvkom zarovnať a rozdeliť priestor v kontajneri. Pomocou flexibilných šírok a výšok možno prvky zarovnať tak, aby vyplnili priestor alebo rozdelili priestor medzi prvkami, čo z neho robí skvelý nástroj na použiť pre responzívne dizajnové systémy.

Aká je predvolená orientácia v kontajneri Flex?

The predvolená usporiadanie po aplikácii zobrazenia: flex je pre položky usporiadané pozdĺž hlavnej osi zľava doprava. Animácia nižšie ukazuje, čo sa stane, keď flex - smer : stĺpec sa pridá k kontajner element. Môžete tiež nastaviť flex - smer na riadok-obrátiť a stĺpec-obrátiť.

Odporúča: