FLEX

1. FLEX

: 레이아웃을 잡을 때 쓰는 기능

 

2. FLEX를 사용하기 위해서 필요한 태그

<container>
    <item>
    </item>
</container>

위와 같은 태그가 필요한 것이 아니라 그에 역할을 하는 태그가 있다는 것을 의미한다. 

그렇다면 두 태그에 부여해야하는 속성은 다음과 같다. 

container		item
display	container를 정의	order	item의 순서를 설정
flex-direction	flex items의 주 축을 설정	flex-grow	item의 증가 너비 비율을 설정
flex-wrap	flex items의 여러 줄 바꿈 설정	flex-shrink	item의 감소 너비 비율을 설정
flex-flow	direction과 wrap의 단축 속성	flex-basis	item의 (공간 배분 전) 기본 너비 설정
justify-content	주 축의 정렬방법을 설정	flex	grow, shrink, basis의 단축 속성
align-items	교차 축의 정렬 방법을 설정(2줄 이상)	align-self	교차 축에서 item의 정렬방법 설정
align-content	교차 축에서items의 정렬 방법을 설정(1줄)

 

 

2-1. DISPLAY, FLEX-DIRECTION

See the Pen XWMyPMM by gpfla6022 (@gpfla6022) on CodePen.

 

 

2-2. FELX-GROW, FLEX-SHRINK, FLEX-BASIS

See the Pen ExWOebw by gpfla6022 (@gpfla6022) on CodePen.

 

 

 

 

2-3. Holy Grail layout

See the Pen ExWObLK by gpfla6022 (@gpfla6022) on CodePen.