12. flexbox 2 (justify-content)

flexbox다루기

flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다.

• 주축 배치 방법 : justify-content
• 교차축 배치 방법 : align-items
• 교차축 개별요소 배치방법 : align-self
• 줄 바꿈 여부 : flex-wrap

flex 컨테이너이기 때무에 가로방향이 기본적인 진행 방향이다.

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

justify-content: center;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: center;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

주축을 기준으로 가운데 정렬이된다.

justify-content: flex-start;

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: flex-start;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

justify-content: flex-end

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: flex-end;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

justify-content: space-around;

space-around는 주축에서 요소들간에 여백을 동일하게 맞추겠다.

.container {
	display: flex;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    justify-content: space-around;
}
.item{
	width: 60px;
    height: 60px;
    background-color: teal;
}

justify-content: space-between;

space-between은 첫 번째 요소와 마지막 요소를 양 끝에 붙이고 나머지 요소들 간에 사이 공간을 동일하게 한다.