We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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!

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

 

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.

 

Autorzy i etykiety dokumentu

Autorzy tej strony: andrzejkrecicki
Ostatnia aktualizacja: andrzejkrecicki,