flexbox : flex-flow

목차

• .

---

 flex-flow

flex-direction과 flex-wrap를 한번에 지정해줌

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    flex-flow: column wrap;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item item_3">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

Github

Link