[ flex ] justify-content

justifiy-content

자식요소 정렬에 대한 속성이다

 

---

<기본세팅>

 

html

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

---

justifiy-content : center;

자식요소 가운데 정렬

.parent{
    display: flex;
    border: 5px solid #000;
    justify-content: center;
}
.child{
    background-color: rgb(57, 246, 130);
    width: 200px;
    height: 200px;
    color: #fff;
    text-align: center;
    line-height: 200px;
}

---

justify-content:flex-start;

자식요소 왼쪽 정렬

.parent{
    display: flex;
    border: 5px solid #000;
    justify-content: flex-start;
}
.child{
    background-color: rgb(57, 246, 130);
    width: 200px;
    height: 200px;
    color: #fff;
    text-align: center;
    line-height: 200px;
}

---

justify-content:flex-end;

자식요소 오른쪽 정렬

.parent{
    display: flex;
    border: 5px solid #000;
    justify-content: flex-end;
}
.child{
    background-color: rgb(57, 246, 130);
    width: 200px;
    height: 200px;
    color: #fff;
    text-align: center;
    line-height: 200px;
}