CSS Flex 완벽 가이드

모든 글은 여기로 부터 출처

• flex는 container items 2가지 개념으로 나뉜다.

• container는 items를 감싸는 부모이고 이 관계는 필수적이다.

• display 는 flex container를 정의한다.

• display의 inline-flex 와 flex는 container의 수평 수직을 결정

• flex-flow는 주축(main-axis) , items(여러 줄 묶음-줄 바꿈) 설정을 함

• flex-direction 주축 설정

• row , 왼 > 오

• flex-wrap 여러 줄 묶음 설정

• nowrap 모든 items를 한줄에 표시

• wrap items를 여러줄 (default)

• wrap-reverse 역방향 여러줄 묶음

• 주축과 교차 축(cross-axis)

• 시작점과 끝점

• justify-content 주축 정렬 법

• align-content 교차축 정렬 법 (items가 여러줄 이상 여백있을때만)

• align-items 교차 축 items 정렬 방법 , 한줄인경우

• flex items 는 나중에 반응형을 지대로 할떄 다시 보자..