2021. 3. 31. 15:24ㆍCSS/Property & Property Value
See the Pen RwKodbB by minsucoding (@minsucoding) on CodePen.
안녕하세요 오늘은 display 속성값중 하나인 flex 에 대해서 알려드리려고해요~
레이아웃을 만들다가 배우시게 되는 속성값인 flex는 요소의 배치에 아주 중요한 속성값이죠!
오늘은 대표적으로 6가지를 설명 드리려고해요~
바로 본론으로 넘어가도록 할게요~
말씀드리기에 앞서 먼저 알려드릴 속성은 justify-content에요
이 속성은 flex가 선언되어있을때 자식요소들을 가로배치 하는 속성이에요
속성값에는 여러가지가 있는데 자주 사용하는 6가지를 가지고 왔어요
첫번째는 justify-content: center에요
center는 말그대로 가운데 정렬을 하는 속성값이에요
예제를 보시면 자식요소들이 가운데정렬이 된것을 볼수있죠
두번째는 justify-content: flex-start에요
flex-start는 flex를 선언해준 요소의 가장 처음(좌측)으로 가는 속성값이에요
예제를 보시면 자식요소가 부모요소에 가장 처음으로 간것을 볼수있어요
세번째는 justify-content: flex-end
flex-end는 flex를 선언해준 요소의 가장 끝(우측)으로 가는 속성값이에요
예제를 보시면 자식요소가 부모요소에 가장 끝으로 간것을 볼수있어요
네번째는 justify-content: space-around
space-around는 자식요소들간에 간격을 좌우가 똑같게 만들어주는 속성값이에요
EX) 만약 세개의 자식요소가 있을때 자식들의 좌우 공간이 150px이라고 하면 두번째 자식은 첫번째와 세번째 자식 사이에서 공간이 300px이 있는거처럼 보여요
간단하게 글로 설명하면 이런 모양이 나오겠네요
[ 150px < 첫번째 > 150px 150px < 두번째 > 150px 150px < 세번째 > 150px ]
즉, [ 150px < 첫번째 > 300px < 두번째 > 300px < 세번째 > 150px ]
첫번째 자식과 세번째 자식의 좌우간격이 같은걸 보실수있는데요
가운데 자식도 좌우로 똑같은 간격을 가지고 있어서 위처럼 가운데만 더 멀어져 보이는거에요
다섯번째는 justify-content: space-between
space-between은 첫번째 자식과 마지막 자식을 부모요소의 좌우측 가장 끝으로 배치를 하고나서 요소들간에 간격을 일정하게 만들어주는 속성값이에요
간단하게 글로 설명하면 이런 모양이 나오겠네요
[ < 첫번째 > 300px < 두번째 > 300px < 세번째 > ]
space-around와는 다르게 간격이 일정한 대신에 좌측과 우측 끝에 여유공간이 없는것을 볼수있어요
여섯번째는 justify-content: space-evenly
space-evenly는 space-around와 space-between의 단점을 보완해낸 속성값이에요 요소와 요소 사이에 거리가 일정하게 배치가 되는것을 볼수있어요
간단하게 글로 설명하면 이런 모양이 나오겠네요
[ 150px < 첫번째 > 150px < 두번째 > 150px < 세번째 > 150px ]
가장 최신에 나온 속성값이기에 호환성문제가 있으니 호환성관련 정보를 찾아보시고 사용하시는걸 추천드릴게요!
오늘은 flex속성값을 사용했을때 justify-content에 대해 알아보았는데요
다음에도 더 좋은 내용으로 찾아뵙겠습니다!
'CSS > Property & Property Value' 카테고리의 다른 글
[CSS]font-size(code) (0) | 2021.04.02 |
---|---|
[CSS]align-items(code) (0) | 2021.03.31 |
[CSS]overflow(code) (0) | 2021.03.31 |
[CSS]visibility: hidden & display: none(code) (0) | 2021.03.31 |
[CSS]position(code) (0) | 2021.03.30 |