반응형
display : Flex Container의 화면 출력(보여짐) 특성
flex : 블록 요소와 같이 Flex Container 정의
inline-flex : 인라인 요소와 같이 Flex Container 정의
Flex Container : flex가 부여된 요소
Flex Items : flex가 부여된 요소의 자식 요소
Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다.
Flex Container 에 부여할 수 있는 속성
display
flex-flow, flex-direction, flex-wrap
justify-content
align-content
align-items
Flex Items 에 부여할 수 있는 속성
order
flex, flex-grow, flex-shrink, flex-basis
align-self
flex-direction : 주 축을 설정
row(기본값) : 행 축 ( 좌 => 우)
row-reverse : 행 축 (우 => 좌)
column : 열 축 ( 위 => 아래)
column-reverse : 열 축 ( 아래 => 위)
*행(수평) 열(수직)
display: flex;
flex-direction: row;
-> 왼쪽(시작점)에서 부터 오른쪽(끝점)으로 수평 정렬
display: flex;
flex-direction: row-reverse;
-> 오른쪽(시작점)에서 부터 왼쪽(끝점)으로 수평 정렬
display: flex;
flex-direction: column;
-> 위(시작점)에서 아래(끝점)로 수직 정렬
display: flex;
flex-direction: column-reverse;
-> 아래(시작점)에서 위(끝점)로 수직정렬