Flexbox에 대해

Flexbox

Flexbox는 css의 레이아웃 모듈 중 하나.

유연한 박스 모델을 구현하기 위한 기술.

Flexbox는 요소 간의 공간 배분, 정렬 및 순서 지정을 위해 설계됨.

이를 통해 복잡한 레이아웃을 쉽게 작성하고 관리 할 수 있음.

Flexbox를 사용하면 다음과 같은 기능을 수행할 수 있음.

1. 요소 간의 공간 분배:

   Felexbox는 유연한 공간 배분을 가능하게 함.

   flex-grow, flex-shirink, `flex-basis`` 등의 속성을 사용하여 요소의 크기를 조정할 수 있음.

2. 요소의 정렬:

   Flexbox를 사용하면 요소를 수평 또는 수직으로 정렬할 수 있음.

   justify-content, align-items 속성을 사용하여 요소를 가로 및 세로로 정렬할 수 있음.

3. 요소의 순서 지정:

   Flexbox를 사용하면 요소의 순서를 변경할 수 있음.

   order 속성을 사용하여 요소의 순서를 지정할 수 있음.

   이를 통해 html마크업의 순서와 레이아웃의 순서를 분리할 수 있음.

4. 자동 줄 바꿈 및 반응형 레이아웃:

   Flexbox는 요소가 가변적인 화면 크기에 따라 자동으로 줄 바꿈 됨.

   반응형 레이아웃을 쉽게 구현할 수 있음.

Flexbox는 복잡한 레이아웃을 간단하게 만들고 유연한 디자인을 가능하게 함.

이전에는 구현이 어려웠던 몇 가지 디자인 패턴을 쉽게 구현할 수 있게 함.