From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pl/web/css/css_flexible_box_layout/index.html | 156 +++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/pl/web/css/css_flexible_box_layout/index.html (limited to 'files/pl/web/css/css_flexible_box_layout') diff --git a/files/pl/web/css/css_flexible_box_layout/index.html b/files/pl/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..ae8c92e4d8 --- /dev/null +++ b/files/pl/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,156 @@ +--- +title: Elastyczny model pudełkowy CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

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.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Kompatybilność przeglądarek

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-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.
+
+ +

 

-- cgit v1.2.3-54-g00ecf