프로그래밍-웹/반응형웹
[ flex ] justify-content
지연2
2022. 12. 30. 09:48
728x90
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;
}