flex-wrapNieruchomość jest sub-property modułu Flexible Box Layout.
Określa, czy elementy flex są wymuszane w jednej linii, czy też mogą być przepuszczane do wielu linii. Jeśli jest ustawiony na wiele linii, definiuje również oś poprzeczną, która określa kierunek, w którym nowe linie są układane w stos.
Przypomnienie: oś poprzeczna to oś prostopadła do osi głównej. Jego kierunek zależy od kierunku głównej osi.
flex-wrapWłaściwość przyjmuje 3 różne wartości
nowrap( domyślnie ): jednowierszowy, który może spowodować przepełnienie kontenerawrap: wieloliniowe, kierunek jest określony przezflex-directionwrap-reverse: wieloliniowe, przeciwnie do kierunku określonego przezflex-direction
Składnia
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Próbny
W poniższym demo:
- Czerwona lista jest ustawiona na
nowrap - Żółta lista jest ustawiona na
wrap - Niebieska lista jest ustawiona na
wrap-reverse
Uwaga: flex-directionjest ustawiona na wartość domyślną: row.
Zobacz Pen Flex-wrap: demo autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).