flex-flow | Codingku

Properti CSS flex-flow merupakan sub-properti dari modul layout kotak Flexbox.

Properti flex-flow adalah singkatan untuk mengatur properti flex-direction dan flex-wrap, yang bersama-sama menentukan sumbu utama dan poros penyaluran container.

Nilai awal dari properti flex-flow ini adalah rangkuman dari nilai awal properti flex-direction dan flex-wrap.

flex-flow: row nowrap;

CSS Syntax

flex-flow: flex-direction flex-wrap | initial | inherit;

Javascript Syntax

object.style.flexFlow="column nowrap"

Attribute Value

flex-direction
- row
- row-reverse
- column
- column-reverse
- initial
- inherit
flex-wrap
- nowrap
- wrap
- wrap-reverse
- initial
- inherit

Contoh:

HTML CSS Preview

<p>
    <code>flex-flow: row nowrap; /* the default value */</code>
</p>
<div class="flex__wrap">
    <div class="flex__item">1</div>
    <div class="flex__item">2</div>
    <div class="flex__item">3</div>
    <div class="flex__item">4</div>
    <div class="flex__item">5</div>
    <div class="flex__item">6</div>
    <div class="flex__item">7</div>
    <div class="flex__item">8</div>
</div>

.flex__wrap {
display: flex;
flex-flow: row nowrap;
margin: 20px auto;
width: 100%;
padding: 20px;
display: flex;
flex-flow: row nowrap;
background-color: #594255;
}

.flex__item {
background-color: #fff;
width: 100px;
height: 100px;
margin: 2px;
text-align: center;
line-height: 100px;
font-weight: bold;
font-family: sans-serif;
font-size: 5em;
color: #594255;
}