[CSS] FLEX 속성 정리

기본 설정: Flex 컨테이너와 줄 바꿈

어떤 방법을 사용하든, 두 가지 CSS 속성이 기본적으로 필요하다.

1. display: flex;: 부모 요소에 이 속성을 적용하여 해당 요소를 Flex 컨테이너로 만든다.
2. flex-wrap: wrap;: 자식 요소(Flex 아이템)들의 총 너비가 부모 컨테이너보다 클 경우, 자동으로 다음 줄로 넘어가도록 설정한다. 이 속성이 없으면 아이템들은 한 줄에 억지로 들어가려고 하거나 밖으로 넘치게 된다.

.container {
    display: flex;
    flex-wrap: wrap; /* 핵심 설정: 아이템들이 넘치면 줄 바꿈 */
    border: 2px solid black;
}

---

방법 1: flex 속성을 이용한 유연한 비율 설정 ✨

flex 속성은 아이템의 크기와 유연성을 한 번에 제어하는 강력한 단축 속성이다.

예제 코드

.item {
    /* flex-grow, flex-shrink, flex-basis */
    flex: 1 1 30%;
    margin: 10px;
    padding: 20px;
    background-color: lightblue;
}
.item.large { flex: 1 1 60%; }
.item.small { flex: 1 1 20%; }

동작 원리

flex 속성은 flex-grow, flex-shrink, flex-basis 세 가지 값을 순서대로 갖는다.

• flex-basis: 30%: 아이템의 기본 너비를 컨테이너의 30%로 설정한다.
• flex-grow: 1: 한 줄에 공간이 남을 경우, 아이템들이 남은 공간을 1의 비율로 나누어 가져서 늘어난다.
• flex-shrink: 1: 한 줄에 공간이 부족할 경우, 아이템들이 1의 비율로 크기를 줄인다.

이 방식의 가장 큰 장점은 유연성이다. flex-basis로 기본 크기를 정하되, 남거나 부족한 공간에 따라 아이템들이 지능적으로 크기를 조절하여 레이아웃을 최적으로 채워준다.

---

방법 2: width 속성을 이용한 직관적인 너비 설정 ↔️

width 속성을 사용하면 더 직관적이고 고정적인 비율로 아이템의 너비를 설정할 수 있다.

예제 코드

.item {
    width: 30%;
    box-sizing: border-box; /* 중요: padding과 border를 너비에 포함 */
    margin: 10px;
    padding: 20px;
    background-color: lightblue;
}
.item.large { width: 60%; }
.item.small { width: 20%; }

동작 원리

Flex 컨테이너 안의 아이템이라도 width 속성은 여전히 작동한다. 각 아이템은 지정된 width 값에 따라 너비를 차지하며, flex-wrap: wrap; 설정에 의해 공간이 부족하면 다음 줄로 넘어간다.

여기서 중요한 점은 **box-sizing: border-box;**이다. 이 속성이 없으면 width: 30%;에 padding과 border 값이 더해져 실제 차지하는 공간이 30%를 넘게 된다. box-sizing: border-box;는 padding과 border를 width 값 안에 포함시켜주므로, 비율 기반의 레이아웃을 계산하기 훨씬 쉬워진다.

---

flex vs. width: 언제 무엇을 써야 할까?

• flex 속성을 사용해야 할 때:
  • 아이템들이 동적으로 크기를 조절하며 남는 공간 없이 컨테이너를 꽉 채워야 할 때.
  • 단순한 비율 배분을 넘어, 아이템의 확대/축소 비율까지 정밀하게 제어하고 싶을 때.
• width 속성을 사용해야 할 때:
  • 더 직관적이고 예측 가능한 고정 비율의 레이아웃이 필요할 때.
  • Flexbox의 복잡한 속성 없이 간단하게 너비만 지정하고 싶을 때.