CSS Property • 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

<div class="layout">
    <div class="flex-wrapper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</div>

<style>
.layout {
	max-width: 135px; /* Lebar Maksimum */
	padding: 4px; /* Padding Agar Sedikit Rapih */
	border: 1px solid red; /* Border Agar Mudah Mengetahui Batas */
}

.flex-wrapper {
    display: flex; /* Set Ke Display Flex */
    gap: 4px; /* Beri Sedikit Jarak */
    flex-wrap: nowarp; /* Izin Wrap di sini: "nowrap", "wrap", "wrap-reverse" */
}

.box {
    width: 40px;
    height: 40px;
    border: 1px solid black;
}
</style>

Terkait Dengan Catatan

CSS Property • flex-direction

Referensi Atau Sumber Eksternal

flex-wrap - CSS | MDN