[ flex ] display:flex;

display:flex; 

자식요소를 이렇게 배열할 수 있다

 

display:inline-flex도 마찬가지인데, inline-flex는 자식요소의 영역만큼 부모요소의 너비가 정해진다

 

---

html

<div class="parent">
        <div class="child">자식요소</div>
        <div class="child">자식요소</div>
        <div class="child">자식요소</div>
</div>

css

.parent{
    display: flex;
}
.child{
    background-color: yellowgreen;
    width: 200px;
    height: 200px;
    margin: 10px;
    color: #fff;
    text-align: center;
    line-height: 200px;
}