Flex Layout은 요소를 정렬하고 정렬하는 유연한 방법을 제공하는 웹 페이지 레이아웃용 CSS 모듈입니다. Flex 레이아웃을 사용하면 컨테이너 내의 요소가 자동으로 크기를 조정하고 다양한 화면 크기 및 장치 유형에 맞게 조정할 수 있습니다.
Flex 레이아웃은 컨테이너에 display: flex 또는 display: inline-flex 속성을 적용하여 활성화됩니다. 컨테이너 내부의 하위 요소는 플렉스 항목이 되며 컨테이너의 기본 및 교차 축에 따라 정렬됩니다.
다음은 플렉스 레이아웃의 몇 가지 중요한 개념입니다.
- 주축과 교차축: 컨테이너의 주축은 플렉스 아이템이 배치되는 방향으로 가로(행) 또는 세로(열)가 될 수 있습니다. 교차축은 주축에 수직인 방향입니다.
- Flex 컨테이너 속성: Flex 항목의 정렬 및 정렬을 제어하는 데 사용되는 flex-direction, flex-wrap, flex-flow, justify-content 및 align-items 등을 포함합니다.
- 플렉스 항목 속성: 컨테이너에서 플렉스 항목의 유연성과 정렬을 제어하는 데 사용되는 flex-grow, flex-shrink, flex-basis, flex 및 align-self 등을 포함합니다.
이러한 속성을 유연하게 사용하여 수평 중심, 수직 중심 및 균등 분할 레이아웃과 같은 다양한 레이아웃 효과를 얻을 수 있습니다. Flex 레이아웃은 현대 웹 개발에서 일반적으로 사용되는 레이아웃 방법 중 하나로 이해하기 쉽고 유연하며 실용적이며 다양한 시나리오에 적합합니다.