[css]Flexbox 마스터하기: 3.Flex 컨테이너 설정

Flex 아이템은 Flex 컨테이너 내에서 배치되는 개별 요소입니다. 이번에는 Flex 아이템에 대한 설정에 대해 알아보겠습니다. Flex 아이템을 조정하면 유연한 레이아웃을 구성할 수 있습니다.

[ Flex 아이템 순서 변경 (order) ]

Flex 아이템의 순서를 변경하기 위해 order 속성을 사용할 수 있습니다. order 값은 숫자로 지정하며, 숫자가 작을수록 앞에 위치하게 됩니다.

 

<div class="container">
  <div class="item">Item 1</div>
  <div class="item" style="order: 1;">Item 2</div>
  <div class="item" style="order: -1;">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
}

 

[ Flex 아이템의 크기 조절 (flex-grow, flex-shrink, flex-basis) ]

Flex 아이템의 크기를 조절하기 위해 flex-grow, flex-shrink, flex-basis 속성을 사용할 수 있습니다. 이들은 각각 Flex 아이템의 증가 비율, 감소 비율, 기본 크기를 지정합니다.

 

<div class="container">
  <div class="item" style="flex-grow: 1;">Item 1</div>
  <div class="item" style="flex-grow: 2;">Item 2</div>
  <div class="item" style="flex-grow: 1;">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
}

 

[ Flex 아이템 개별 정렬 (align-self) ]

Flex 컨테이너의 align-items 속성은 모든 Flex 아이템에게 동일한 정렬을 적용합니다. 그러나 개별 Flex 아이템에 대해 다른 정렬을 적용하려면 align-self 속성을 사용할 수 있습니다.

 

<div class="container">
  <div class="item">Item 1</div>
  <div class="item align-end">Item 2</div>
  <div class="item align-center">Item 3</div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 150px;
  border:1px solid red;
}

.item {
  background-color: #f1f1f1;
  border: 1px solid #999;
  padding: 10px;
  margin: 5px;
}

.align-end {
  align-self: flex-end;
  height: 80px;
}

.align-center {
  align-self: flex-start;
  height: 90px;
}

 

위의 코드를 사용하면 align-self 속성을 사용하여 개별 Flex 아이템을 정렬할 수 있습니다. 동시에 각 아이템의 높이도 조정하여 다르게 보이도록 하였습니다

 

"배너 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."