CSS display : flex 의 justify-content

영우·2022년 10월 12일

웹페이지 구현을 위해 레이아웃을 잡을때 display, float 와 같은 css 속성을 이용하거나 혹은 간단하게 text-align 을 이용하여 요소들을 정렬하는등 여러 css 속성들을 사용합니다. 오늘 알아볼 속성은 display : flex 속성에서도 특별히 justify-content 속성입니다.

display : flex

display의 flex속성은 flexbox, flexible box라고 부르기도합니다. flexbox는 효율적으로 요소들을 배치, 정렬, 분산 하는 방법을 제공해주는 레이아웃 방식입니다.

flex box는 자식인 flex item과 부모의 flex container로 구성됩니다.

부모인 flex container의 속성과 자식인 flex item의 속성은 엄연히 구분됩니다. 전체적인 배치, 정렬등에 관련된 속성은 부모인 flex container에, 자식요소의 순서, 크기등에 관련된 속성은 자식인 flex item에 정의합니다.

flex container : flex-direction, flex-wrap, justify-content, align-items, align-content
flex item : flex, flex-grow, flex-shrink, flex-basis, order, align-self

간단히 부모 컨테이너에 display: flex 를 사용함으로써 flex box를 만들 수 있습니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        display:flex;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>

justify-content

이번 포스팅에서 알아볼 flex container의 justify-content 속성입니다.

justify-content 속성은 메인축 방향으로 아이템들을 정렬하는 속성입니다. 간단히 말해서 가로로 아이템들을 정렬하신다고 생각하시면 됩니다.

justify-content : flex-start

justify-content의 가장 기본적인 flex-start 속성입니다. flex item들이 시작점으로 정렬합니다. 나중에 배우실 flex-direction이 row(기본)일때는 왼쪽, column(세로배치) 일때는 위부터 시작합니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        background-color: pink;
        display:flex;
        justify-content: flex-start;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>

보기 편하도록 배경을 핑크색으로 하였습니다.

justify-content : flex-end

flex-end 속성은 flex item 들을 끝에 정렬합니다. flex-direction이 row일때는 오른쪽, column일때는 아래입니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        background-color: pink;
        display:flex;
        justify-content: flex-end;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>

justify-content : center

center 속성은 이름 그대로 가운데 정렬입니다. flex item들이 가운데 정렬됩니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        background-color: pink;
        display:flex;
        justify-content: center;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>

justify-content : space-between

space-between 속성은 flex item들의 사이에 균일한 간격을 만들어줍니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        background-color: pink;
        display:flex;
        justify-content: space-between;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>

justify-content : space-around

마지막으로 space-around 속성입니다. 방금 전의 space-between 속성과 비슷하지만 엄연히 다른 속성입니다. space-between 속성은 단순히 flex item 사이의 간격만 있는 것이고, space-around 속성은 item 자체가 일정한 간격으로 있는 것입니다.

<div class = "flex_container">
	<div class = "flex_item">첫번째 상자</div>
    <div class = "flex_item">두번째 상자</div>
    <div class = "flex_item">세번째 상자</div>
</div>

<style>

	.flex_container{
    	border:1px solid black;
        background-color: pink;
        display:flex;
        justify-content: space-around;
    }
	
	.flex_item{
    	margin: 20px;
    	background-color:skyblue;
    }
</style>