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
| 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.