Kontener elastyczny {display: flex inline-flex}
Jak przełączyć sposób rozpalnowania elementów na układ elastyczny?
CSS 3
- Układ elastyczny w bloku:
selektor { display: flex } - Układ elastyczny w linii:
selektor { display: inline-flex }
Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci układane są elastycznie. Sam kontener nie jest układany elastycznie na stronie, a jedynie jego dzieci. Wstawienie takiego kontenera przełącza tryb wyświetlania elementów w nim zawartych na układ elastyczny.
Aby jakiekolwiek własności, opisane dalej w tym rozdziale, dały widoczny efekt, konieczne jest dodanie powyższego stylu do elementu, który ma wyznaczać układ elastyczny.
Pytania i odpowiedzi {display: flex}
Do czego służy "display: flex"?
Deklaracja CSS "display: flex" służy do tworzenia elastycznego kontenera, który umożliwia układanie elementów w jednym wierszu lub kolumnie. Dzięki niej można łatwo zarządzać rozmieszczeniem i odstępami między elementami wewnątrz kontenera, co jest przydatne do budowy responsywnych i dynamicznych układów.
Co jest lepsze: "grid" czy "flex"?
Nie można jednoznacznie stwierdzić, które jest lepsze, ponieważ "grid" (grid layout) i "flex" (flexbox) mają różne zastosowania.
Kiedy stosować "grid", a kiedy "flexbox"?
"Grid" jest idealny do tworzenia układów dwuwymiarowych, gdzie można precyzyjnie kontrolować zarówno poziome, jak i pionowe pozycje elementów. "Flex" jest bardziej odpowiedni do prostych układów w jednym wymiarze, np. wiersza lub kolumny. Wybór zależy od konkretnej potrzeby projektowej i często używa się ich jednocześnie, aby osiągnąć pożądany efekt.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
display: flex | 29 2013-08-20 | 20 2013-04-02 | 12 2015-07-29 | 16 2013-08-27 | 9 2015-09-30 |
display: inline-flex | 29 2013-08-20 | 20 2013-04-02 | 12 2015-07-29 | 16 2013-08-27 | 9 2015-09-30 |