CSS Properti flex-wrap

flex-wrap adalah properti untuk membuat izin apakah item flex boleh membuat kolom baru atau tidak (tetap memaksa satu kolom).

Aturan

flex-wrap: nowrap; tidak diizinkan (default).
flex-wrap: wrap; diizinkan.
flex-wrap: wrap-reverse; diizinkan tapi dibalik urutannya.

Aturan Global

flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

Contoh Ilustrasi

`nowarp`

css_flex_nowrap_20250909162217 Walaupun lebar layout tidak mencukupi, item tetap satu kolom saja.

`warp`

css_flex_wrap_20250909162217 Item 4, 5, 6 akan turun ke kolam berikutnya, Karena layout tidak mencukupi lebarnya.

`wrap-reverse`

css_flex_wrap_reverse_20250909162217 Sama seperti wrap cuma urutannya dibalik.

Contoh Implementasi

 1<div class="layout">
 2    <div class="flex-wrapper">
 3        <div class="box">1</div>
 4        <div class="box">2</div>
 5        <div class="box">3</div>
 6        <div class="box">4</div>
 7        <div class="box">5</div>
 8        <div class="box">6</div>
 9    </div>
10</div>
11
12<style>
13.layout {
14	max-width: 135px; /* Lebar Maksimum */
15	padding: 4px; /* Padding Agar Sedikit Rapih */
16	border: 1px solid red; /* Border Agar Mudah Mengetahui Batas */
17}
18
19.flex-wrapper {
20    display: flex; /* Set Ke Display Flex */
21    gap: 4px; /* Beri Sedikit Jarak */
22    flex-wrap: nowarp; /* Izin Wrap di sini: "nowrap", "wrap", "wrap-reverse" */
23}
24
25.box {
26    width: 40px;
27    height: 40px;
28    border: 1px solid black;
29}
30</style>

Referensi Atau Sumber Eksternal

flex-wrap - CSS | MDN