ś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.
display: flex: Ta właściwość stosowana do kontenera powoduje, że staje się on kontenerem flex, a jego dzieci są elementami flex.
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.
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'.
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'.
align-self: Pozwala na nadpisanie wyrównania osi poprzecznej dla poszczególnych elementów flex, przyjmuje te same wartości co 'align-items'.
flex-wrap: Określa, czy elementy flex będą zawijać się do nowej linii. Może przyjmować wartości 'nowrap', 'wrap', 'wrap-reverse'.
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'.
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.
flex-shrink: Określa zdolność elementu do kurczenia się, jeśli nie ma wystarczająco dużo miejsca, domyślna wartość to 1.
flex-basis: Definiuje domyślny rozmiar elementu przed rozdzieleniem pozostałej przestrzeni, może przyjmować wartości rozmiarowe (jak px, %, em) lub 'auto'.
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.
