Design Kits Blog

Flex는 CSS의 레이아웃 모듈 중 하나로, 요소들의 크기와 위치를 유연하게 조정할 수 있게 해주는 기술입니다. 

Flexbox는 주로 수평 정렬이나, 아이템 간 간격 조정 등에 유용하게 사용됩니다.

Flex를 활용하여 요소를 배치하는 방법은 다음과 같습니다.

1. 부모 요소에 display: flex; 속성을 적용합니다. 이렇게 하면 부모 요소가 Flex Container가 되며, 자식 요소들이 Flex Items가 됩니다.

.parent {

  display: flex;

}

2. Flex Container의 방향을 설정합니다. Flex Container 내부의 Flex Items들이 배치될 방향을 설정할 수 있습니다. 

기본값은 row이며, 수평 방향으로 배치됩니다. 

수직 방향으로 배치하고 싶다면 column 속성을 사용합니다.

.parent {

  display: flex;

  flex-direction: column;

}

3. Flex Items의 크기를 설정합니다. Flex Items의 크기를 조절하여 각각의 너비와 높이를 설정할 수 있습니다.

 flex 속성을 이용하여 Flex Item의 너비를 설정할 수 있습니다.

.parent {

  display: flex;

}

.child {

  flex: 1; /* 부모 요소의 남은 공간을 모두 차지 */

}

4. Flex Items의 정렬 방법을 설정합니다. justify-content와 align-items 속성을 사용하여 Flex Items를 수평 및 수직 방향으로 정렬할 수 있습니다.

.parent {

  display: flex;

  justify-content: center; /* 수평 가운데 정렬 */

  align-items: center; /* 수직 가운데 정렬 */

}

Flex를 사용하여 웹 페이지의 레이아웃을 만들 수 있으며, 반응형 디자인에도 유용하게 활용할 수 있습니다. 

또한 Flexbox는 CSS Grid와 함께 사용하여 더욱 복잡한 레이아웃을 만들 수 있습니다.