[CSS] Float vs Flex

❓Float이란?

float은 텍스트와 이미지 같은 인라인 요소를 조정하기 위한 목적으로 만들어졌지만 flex등장 이전에 레이아웃을 만들기 위해 많이 사용 되었습니다.

❗️Float 주요 속성

• float: left: 요소를 부모 컨테이너의 왼쪽으로 띄워줍니다.

• float: right: 요소를 부모 컨테이너의 오른쪽으로 띄워줍니다.

• float: inherit: 부모 요소의 float 속성을 상속 받습니다.

• float 속성을 적용하면 그 다음 요소에 영향을 미칠 수 있습니다.
  그것을 방지하기 위해 clear속성을 사용합니다.

📝 Float의 문제점 및 한계

• float을 사용하면 부모 요소가 자식의 크기를 인식하지 못하는 등의 문제가 생길 수 있습니다. 그래서 clear를 사용하여 다음 요소에 미치는 영향을 제어해 주어야 합니다.

• 이렇게 float으로는 복잡한 레이아웃을 만들기 힘들고, 반응형 디자인에서는 flex와 같은 레이아웃을 사용하는 것이 좋습니다.

❓Flex란?

flex는 컨테이너 안에서 유연하고 반응성이 좋은 레이아웃을 만들기 위해 만들어진 속성입니다.

❗️Flex 주요 속성

컨테이너 속성

• display: flex: 컨테이너를 flex로 지정합니다.

• flex-direction: :항목을row, column등으로 방향을 결정합니다.

• justify-content:주 축을 기준으로flex-start,center등을 따라서 항목을 정렬해 줍니다.

• align-items: 교차축을stretch, center에 따라서 항목을 정렬해 줍니다.

• flex-wrap:nowrap,wrap으로 항목의 줄바꿈을 허용할지 말지 정해줍니다.

항목 속성

• order: 항목의 순서를 지정해 줍니다.

• flex-grow: 항목이 다른 항목에 비해 얼마나 늘어나야 하는지 지정해 줍니다.

• flex-shrink: 공간이 부족할 때 항목을 얼마나 줄여야 하는지 정해줍니다.

• flex-basis: 항목의 초기 크기를 설정해 줍니다.

• align-self: 개별적인 정렬을 하기 위해서 align-items를 재정의 해줍니다.

📝 Flex의 장점

• float과 같이 clear와 같은 속성에 의존하지 않고 복잡하고 반응이 빠른 레이아웃을 비교적 쉽게 만들 수 있습니다.

💡요약

대부분의 레이아웃에 Flex가 더 나은 이유는 아래와 같습니다.

• float은 텍스트 흐름용으로 만들어진 반면 flex는 레이아웃용으로 만들어졌습니다.

• 그로 인해 반응형 레이아웃을 만들기 쉬운 속성을 가지고 있습니다.

• 때문에 flex는 컨테이너의 크기 조정과 정렬 및 요소의 순서를 효율적으로 처리할 수 있습니다.

• 하지만 float을 아예 배제 하는 것은 좋다고 할 수 없습니다.
  이미 사용 중인 곳도 많고 이미지 주위의 텍스트를 배치하는 등의 일부 상황에서는 유용하기 때문입니다.