#7. CSS Flexbox 속성

 

CSS Flexbox 속성은 다수의 자식 요소를 배치하는 방법을 제어하는데 사용됩니다.

다음은 각 속성에 대한 간단한 설명입니다.

 

1. flex-direction: 플렉스 컨테이너에서 자식 요소의 배치 방향을 정의합니다. 가능한 값으로는 row, row-reverse, column, column-reverse가 있습니다.
2. flex-wrap: 플렉스 컨테이너의 크기를 초과하는 자식 요소를 어떻게 랩핑할지 정의합니다. 가능한 값으로는 nowrap, wrap, wrap-reverse가 있습니다.
3. justify-content: 플렉스 컨테이너에서 자식 요소들의 수평 방향 배치 방법을 정의합니다. 가능한 값으로는 flex-start, flex-end, center, space-between, space-around가 있습니다.
4. align-items: 플렉스 컨테이너에서 자식 요소들의 수직 방향 배치 방법을 정의합니다. 가능한 값으로는 flex-start, flex-end, center, baseline, stretch가 있습니다.
5. align-content 속성은 플렉스 컨테이너에 여러 줄의 플렉스 아이템들이 있을 때, 이들의 수직 방향 배치 방법을 정의합니다. 즉, 플렉스 아이템들이 차지하는 높이에 대한 정렬 방식을 정의합니다. 가능한 값으로는 flex-start, flex-end, center, space-between, space-around, stretch가 있습니다.
6. flex-start: 플렉스 컨테이너의 상단에 플렉스 아이템들이 배치됩니다.
7. flex-end: 플렉스 컨테이너의 하단에 플렉스 아이템들이 배치됩니다.
8. center: 플렉스 컨테이너의 중앙에 플렉스 아이템들이 배치됩니다.
9. space-between: 플렉스 아이템들이 플렉스 컨테이너의 상단과 하단 사이에 균등한 간격으로 배치됩니다.
10. space-around 값은 플렉스 아이템들 주위에 균등한 간격이 있는 빈 공간이 만들어지며, 플렉스 아이템들이 그 안에서 균등한 간격으로 배치됩니다.

예를 들어,

플렉스 컨테이너에 3개의 플렉스 아이템이 있고, 이 아이템들이 각각 같은 높이를 가진다고 가정합니다.

플렉스 컨테이너의 높이는 3개의 플렉스 아이템의 높이의 총합보다 높다고 가정할 때, space-around 값을 사용할 경우 각 플렉스 아이템 사이에 공간이 만들어지며, 플렉스 아이템들이 균등한 간격으로 배치됩니다.

즉, 플렉스 아이템들 주위에 공간이 생기며 플렉스 아이템들은 균등한 간격으로 배치되어 모양새가 더 깔끔해집니다.

 

예:

<style>
  .container {
    display: flex;
    height: 300px;
    align-content: space-around;
  }

  .item {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
</style>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

위의 코드를 실행하면, 플렉스 컨테이너에 플렉스 아이템들이 균등한 간격으로 배치되어 플렉스 아이템들 주위에 공간이 생기는 것을 볼 수 있습니다.

 

플랙스 박스에 대한 사용 방법은 아래의 게시물을 참고하면 조금 더 이해하기 쉬울 수 있습니다.

※ 참고: 한 장으로 정리하는 Flex Box