justify-content 속성

속성 justify-content는 플렉스(flex) 블록의 메인 축과 그리드(grid)의 수평 축을 따라 요소들을 정렬합니다. 부모 요소에 적용됩니다.

구문

css선택자 {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

값

기본값: flex-start.

예제 . flex-start 값

현재 축은 왼쪽에서 오른쪽으로 향합니다(이는 flex-direction: row에 의해 설정됨). 블록들은 왼쪽에 붙어 있습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . flex-end 값

이 예제에서도 축은 왼쪽에서 오른쪽으로 향하지만, justify-content가 flex-end 값으로 설정되어 블록들이 오른쪽에 붙어 있습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . center 값

이제 블록들은 메인 축의 방향에 관계없이 중앙에 정렬됩니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . space-between 값

블록들이 메인 축을 따라 분배되며, 첫 번째 요소는 축의 시작점에, 마지막 요소는 축의 끝점에 붙습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . space-around 값

블록들이 메인 축을 따라 분배되며, 첫 번째 블록과 축 시작점 사이, 마지막 블록과 축 끝점 사이의 간격이 다른 블록들 사이의 간격과 같습니다. 그러나 간격들이 합쳐져서 두 블록 사이의 거리는 블록과 축 시작점/끝점 사이 거리의 두 배가 됩니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . center 값. 축이 아래로 향함

flex-direction을 column 값으로 설정하여 메인 축의 방향을 변경해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . space-between 값. 축이 아래로 향함

이제 블록들이 수직 방향으로 균등하게 분배됩니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

예제 . 그리드에서 수평 축(행)의 시작점 정렬

요소들을 수평 축의 시작점에 정렬하도록 설정해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

예제 . 그리드에서 수평 축 중앙 정렬

이제 요소들을 수평 축의 중앙에 정렬하도록 설정해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

예제 . 그리드에서 수평 축 끝점 정렬

요소들을 수평 축의 끝점에 정렬하도록 설정해 보겠습니다:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

같이 보기