[CSS] FLEX BOX (플렉스 박스) 사용하기

FLEX BOX (플렉스 박스) 수평, 수직(상하, 좌우) 구조 정렬을 쉽게 할 수 있습니다. 그리드로 레이아웃을 만든 후 플렉스 박스로 수평, 수직(상하, 좌우) 정렬을 하면 좋습니다. FLEX BOX (플렉스 박스) 컨테이너 속성 속성 설명 flex-direction Flex Items의 주 축(main-axis)을 설정 예제 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 예제 flex-flow "flex-direction", "flex-wrap"의 단축 속성 예제 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) FLEX BOX (플렉스 박스) 아이템 속성 속성 설명 flex-grow Flex Item의 증가 너비 비율을 설정 예제 flex-shrink...

원문링크 : [CSS] FLEX BOX (플렉스 박스) 사용하기