(C) Układ Flex CSS*

Układ Flex CSS

Układ Flex

Układ Flex (Rodzic)

  • display: flex; – Zmienia tryb wyświetlania zawartości wskazanego obiektu HTML, na tryb flex. Wartość flex przypisana do rodzica, wpływa na tryb wyświetlania dzieci obiektu HTML (Domyślnie dzieci obiektu flex, będą wyświetlane jeden obok drugiego).
  • flex-direction: column / row; – Określa ułożenie dzieci obiektu flex (W pionie bądź poziomie).

Układ w pionie i poziomie (Rodzic)

  • justify-content: Opcja; – Określa pozycję dzieci obiektu flex w pionie.
    • normal – Obiekty są rozciągnięte, od góry do dołu.
    • flex-start – Obiekty znajdują się w górnej części obiektu rodzica (Flex).
    • flex-end – Obiekty znajdują się w dolnej części obiektu rodzica (Flex).
    • center – Obiekty znajdują się w środkowej części obiektu rodzica (Flex).
    • stretch – Obiekty są rozciągnięte, od pierwszej lini tekstu do dołu.
  • algin-items: Opcja; – Określa pozycję dzieci obiektu flex w poziomie.
    • flex-start – Obiekty znajdują się po lewej stronie obiektu rodzica (Flex).
    • flex-end – Obiekty znajdują się po prawej stronie obiektu rodzica (Flex).
    • center – Obiekty znajdują się w środkowej części obiektu rodzica (Flex).
    • space-between – Obiekty są rozciągnięte od lewej do prawej strony (Z równymi odstępami powiędzy sobą).
    • space-around – Obiekty są rozciągnięte od lewej do prawej strony (Z równymi odstępami pomiędzy sobą, odstępy znajdują się również pomiędzy pierwszy, ostatnim dzieckiem a rodzicem).

Układ w pionie i poziomie (Dziecko)

  • justify-self: Opcja; – Określa pozycję dziecka flex w pionie.
    • normal – Obiekty są rozciągnięte, od góry do dołu.
    • flex-start – Obiekty znajdują się w górnej części obiektu rodzica (Flex).
    • flex-end – Obiekty znajdują się w dolnej części obiektu rodzica (Flex).
    • center – Obiekty znajdują się w środkowej części obiektu rodzica (Flex).
    • stretch – Obiekty są rozciągnięte, od pierwszej lini tekstu do dołu.
  • algin-self: Opcja; – Określa pozycję dziecka flex w poziomie.
    • flex-start – Obiekty znajdują się po lewej stronie obiektu rodzica (Flex).
    • flex-end – Obiekty znajdują się po prawej stronie obiektu rodzica (Flex).
    • center – Obiekty znajdują się w środkowej części obiektu rodzica (Flex).
    • space-between – Obiekty są rozciągnięte od lewej do prawej strony (Z równymi odstępami powiędzy sobą).
    • space-around – Obiekty są rozciągnięte od lewej do prawej strony (Z równymi odstępami pomiędzy sobą, odstępy znajdują się również pomiędzy pierwszy, ostatnim dzieckiem a rodzicem).

Inne wartości Flex (Dziecko)

  • flex: Wartość; – Określa wielkość obiektu dziecka względem innych obiekt dzieci.
  • flex-basis: Rozmiar; – Określa wielkości obiektu dziecka (Domyślnie 1).
  • flex-grow: Wartość; – Określa tempo wzrostu szerokości dziecka (Domyślnie 1).
  • flex-shrink: Wartość; – Określa tempo zmniejszania szerokości dziecka (Domyślnie 1).
  • flex-wrap: wrap / wrap-reverse; – Przerzuca niemieszczące się dzieci do nowej lini.

Pozostałe tematy związane z CSS

Kaskadowe arkusze stylów

Inspiracje CSS

PDFPRINT

Robert T Kucharski

Cisco Network Engineer in GPW.

Dodaj komentarz