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.

Prosty przykład

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.

Odnośniki

Atrybuty CSS

Słownik pojęć

Przewodniki

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.

Specyfikacje

Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation Initial definition.

Kompatybilność przeglądarek

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit (en-US)
29.0
10.0-ms (en-US)
11.0
12.10 6.1-webkit (en-US)
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 4.4 11 12.10 7.1-webkit (en-US)

 

Zobacz również

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.