Elastyczny model pudełkowy CSS

Elastyczny model pudełkowy CSS jest modułem CSS definiującym model pudełkowy CSS zoptymalizowany do projektowania interfejsów użytkownika i układania elementów wzdłuż osi. W elastycznym modelu pudełkowym dzieci elastycznego kontenera mogą być ułożone w dowolnym kierunku oraz zmieniać swoje rozmiary albo rosnąc w celu zajęcia nieużytej przestrzeni albo kurcząc się by uniknąć przepełnienia kontenera. Zarówno horyzontalne jak i wertykalne ułożenie dzieci może być łatwo kontrolowane.

W poniższym przykładzie kontenerowi ustawiono display: flex co oznacza, że trójka dzieci stała się elastycznymi elementami. Wartość justify-content została ustawiona na space-between w celu równego rozproszenia elementów wzdłuż głównej osi. Między elementami umieszczona zostanie jednakowa ilość przestrzeni, a prawy i lewy element zostaną wypchnięte do krawędzi kontenera. Ponadto elementy są rozciągnięte na całą długość osi prostopadłej z powodu domyślnej wartości align-items wynoszącej stretch. Elementy rozciągają się do maksymanlej wysokości elastycznego kontenera sprawiając, że każdy z nich ma wysokość najwyższego.

Podstawowe zagadnienia Flexboksa

Przegląd funkcji flexboksa

Powiązania flexboksa z innymi sposobami układu

Jak flexbox jest powiązany z innymi rodzajami układu i innymi specyfikacjami CSS

Rozmieszczanie elementów w elastycznym kontenerze

Jak atrybuty ustawiania elementów dziłają z flexboksem.

Kolejność elementów elastycznego kontenera

Wyjaśnienie różnych sposobów na zmienianie kolejności i kierunku elementów oraz omówienie potencjalnych problemów z tym związanych.

Kontrola proporcji elastycznych elementów wzdłuż osi głównej

Artykuł wyjaśniający atrybuty flex-grow, flex-shrink oraz flex-basis.

Przechodzenie elastycznych elementów do nowego wiersza

Tworzenie wielolinijkowych kontenerów flex oraz kontrola wyświetlania elementów w tych linijkach.

Typowe zastosowania flexboksa

Częste wzorce projektowe będące typowymi zastosowaniami flexboksa.

Kompatybilność wsteczna flexboksa

Stan flexboksa w przeglądarkach, problemy "interoperability", wsparcie starszych przeglądarek i wersji specyfikacji.

Flexbugs

tworzona przez społeczność lista błędów flexboksa w przeglądarkach i sposoby ich obejścia

Cross-browser Flexbox mixins

Artykuł zawierający zbiór mixinów dla tych którzy chcą stworzyć wieloprzeglądarkowe rozwiązania typu flexbox działające nawet w starszych przeglądarkach nie wspierających nowoczesnej składni flexbox.