CSS에서 플렉스박스 작업하기
아시다시피, 주 축을 따라 요소를 정렬하는
justify-content 속성이 존재합니다.
교차 축을 따라 요소를 정렬하는
align-items 속성도 있습니다. 이 속성을
약간 실험해 봅시다.
현재 블록들이 행으로 배열되어 있다고 가정해 봅시다.
즉, 교차 축은 아래쪽을 향합니다.
align-items를 사용하여 이 블록들을
중앙에 배치해 보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
이제 더 많은 블록을 추가하고,
flex-wrap를 사용하여 다중 행을 활성화하고,
부모의 높이를 300px에서 500px로 늘린 후
align-items가 이 다중 행 경우에 어떻게 작동하는지 살펴봅시다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
보시다시피, 중앙 정렬이 그다지 잘 되지 않습니다. 마치 각 행이 지정된 공간 내에서 자체적으로 중앙에 배치되는 것 같습니다. 모든 행이 하나의 단위로 부모 컨테이너의 중앙에 오도록 만들어 봅시다.
이를 위해서는 다중 행 텍스트에 사용되는
align-content 속성을 사용해야 합니다.
코드를 다시 작성해 보겠습니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
align-content 속성은
align-items와 동일한 값을 받습니다.
space-between 값
예를 들어 space-between 값을 살펴봅시다.
부모의 높이를 320px로 설정합니다.
세 개의 행과 두 개의 행 간 간격이 있으므로,
이 간격은 각각 10px가 됩니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
stretch 값
stretch 값을 시도해 봅시다.
자식 요소의 높이를 제거하고,
더 명확한 효과를 위해 부모의 높이를
600px로 설정합니다.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
align-content의 stretch 값은
기본값입니다. 자식 요소의 높이를 완전히 제거하고,
align-content 속성을 제거하지만
부모의 높이와 flex-wrap를
유지하면 모든 것이 동일하게 작동합니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
그러나 flex-wrap도 제거하면
모든 것이 한 줄로 배치됩니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
축 뒤집기
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
특별한 조건
flex-wrap: wrap 없이는 아무것도 작동하지 않습니다. 한 줄만 있다고 가정해 봅시다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
flex-wrap: wrap을 제거하면 align-content: center가 작동을 멈춥니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
