Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Właściwości Flex

środa,

CSS: Właściwości Flex

Flexbox w CSS jest układem jednowymiarowym, który umożliwia łatwe zarządzanie układem elementów wewnątrz kontenera, zarówno w pionie, jak i w poziomie. Jest niezwykle użyteczny do tworzenia responsywnych układów, ponieważ pozwala elementom dostosowywać się do dostępnej przestrzeni oraz szczególnie przydatny w układach jednowymiarowych, gdzie zarządzanie przestrzenią w jednej osi (pionowej lub poziomej) jest kluczowe. Poznaj główne właściwości i ich funkcje w Flexbox.

  1. display: flex: Ta właściwość stosowana do kontenera powoduje, że staje się on kontenerem flex, a jego dzieci są elementami flex.

  2. flex-direction: Określa główny kierunek osi w kontenerze flex (row, row-reverse, column, column-reverse). Na przykład, 'row' ustawia elementy poziomo, a 'column' pionowo.

  3. justify-content: Ta właściwość definiuje, jak elementy flex są rozkładane wzdłuż głównej osi kontenera, może przyjmować wartości takie jak 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'.

  4. align-items: Steruje wyrównaniem elementów flex wzdłuż osi poprzecznej (prostopadłej do głównej osi). Może być ustawiony na wartości takie jak 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'.

  5. align-self: Pozwala na nadpisanie wyrównania osi poprzecznej dla poszczególnych elementów flex, przyjmuje te same wartości co 'align-items'.

  6. flex-wrap: Określa, czy elementy flex będą zawijać się do nowej linii. Może przyjmować wartości 'nowrap', 'wrap', 'wrap-reverse'.

  7. align-content: Ta właściwość ma zastosowanie tylko, gdy jest więcej niż jedna linia elementów flex i pozwala kontrolować ich rozmieszczenie wzdłuż osi poprzecznej. Może przyjmować wartości takie jak 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'.

  8. flex-grow: Właściwość dla elementu flex określająca, jak dużo dostępnego miejsca w kontenerze powinien zająć, domyślna wartość to 0.

  9. flex-shrink: Określa zdolność elementu do kurczenia się, jeśli nie ma wystarczająco dużo miejsca, domyślna wartość to 1.

  10. flex-basis: Definiuje domyślny rozmiar elementu przed rozdzieleniem pozostałej przestrzeni, może przyjmować wartości rozmiarowe (jak px, %, em) lub 'auto'.

  11. flex: Jest to skrócona właściwość dla 'flex-grow', 'flex-shrink' i 'flex-basis', umożliwia ustawienie wszystkich trzech właściwości jednocześnie.

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły