Flex (플랙스)

Flex 개요

• 레이아웃을 구성할 때 많이 사용하는 요소들은 기본적으로 블록 개념으로 표시되며 이는 뷰에 수직으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있다. 하지만 수평 구성의 경우는 그에 비해 어렵다. flex는 수평 구성을 조금 더 쉽게 만들 수 있도록 고안된 방법이다.

CSS Flexible Box

• flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.
• Flex는 2개의 개념으로 나뉘는데 하나는 Container, 다른 하나는 Items이다. Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해서는 Container가 필수적이다.

Flex Container

display

• Flex Container를 정의한다.
• 속성 값
  • flex : block 특성의 flex container를 정의
  • inline-flex : inline 특성의 flex container를 정의
• flex : flex로 지정된 flex container는 block 요소 처럼 수직으로 쌓인다.
• inline-flex : inline-flex로 지정된 flex container는 inline 요소 처럼 수평으로 쌓인다.
• display 속성은 container에 영향을 주지 items에는 영향이 없다.

flex-flow

• flex-items의 주 축을 설정하고 items의 여러 줄 묶음도 설정
• 속성 값
  • flex-direction : items의 주 축을 설정
  • flex-wrap : items의 여러 줄 묶음(줄 바꿈)을 설정
• 사용 방법 (mdn 찾아보기!!)
  • flex-flow: 주축 여러줄묶음;
• flex-direction
  • row : items를 수평축 (왼->오)으로 표시
  • row-reverse : items를 row의 반대 축으로 표시
  • column : items를 수직축 (위->아래)으로 표시
  • column-reverse : items를 column의 반대축으로 표시
• flex-direction: 주축;

• 주 축(main-axis)과 교차 축(cross-axis)
  • row, row-reverse의 주 축은 수평이고 교차 축은 수직이다.
  • column, column-reverse의 주 축은 수직이고 교차 축은 수평이다.

• flex-wrap
  • nowrap : 모든 items를 여러 줄로 묶지 않음 (한 줄에 표시)
  • wrap : items를 여러 줄로 묶음
  • wrap-reverse : items를 wrap의 역방향으로 여러 줄로 묶음