flexbox

Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공합니다.

display:flex (inline-flex)를 선언하면 flexbox모델이 바로 시작됩니다.
flex 모델은 다음 2가지료 요약됩니다.

• Flex container: display: flex를 설정 한 부모 엘리먼트
• Flex items : Flex container 내의 자식 엘리먼트

-. the main axis and the cross axis

flexbox로 작업할 때에는 두축(main axis, cross axis)에 대하여 생각해야합니다.
주축(main axis)은 flex-direction 속성에 의해 정의되며 교차축(cross axis)은 주축과 직각 방향을 갖습니다.
flexbox로하는 모든 작업은이 축을 다시 참조하므로, 처음부터 어떻게 작동하는지 이해할 필요가 있습니다.
flex-direction이 row,row-reverse라면 주축은 수평 방향이고, column, column-reverse라면 수직방향이 주축이 됩니다.

- .Start and end lines

 

Flex Container 속성(Properties)

1. flex-direction

flex-direction은 flex-items 들이 배치되는 방법(방향)을 제어합니다.
default : row
row : 수평방향, 좌에서 우
row-reverse : 수평방향, 우에서 좌
column : 수직방향, 위에서 아래
column-reverse : 수직발향, 아래서 위

2. flex-wrap
default : no-wrap
no-wrap : flex item이 한줄로 배치됩니다.
wrap : flex container안에 flex item이 모두 들어갈 수 없을 경우 flex item은 줄을 바꾸어 표시됩니다. 
wrap-reverse : flex item이 반대방향 여러 라인으로 나뉩니다.

3. justify-content 

주축(main axis)에서 플랙스 아이템을 배치하는 방법을 정의합니다.
default : flex-start
flex-start : 모든 flex-items를 주축(main axis)의 시작 부분으로 그룹화합니다.
flex-end : 모든 flex-items를 주축(main axis)의 끝으로 그룹화합니다.
center : flex-items를 주축(main axis)을 따라 중앙에 배치합니다.
space-between : flex item간의 동일한 간격(space)를 유지합니다.
space-around :flex-items 주위에 동일한 간격을 유지합니다.

4. align-items
교차 축(cross axis)에 플랙스 아이템을 배치되는 방법을 정의한다. 
default : stretch
flex-start : 모든 flex-items를 교차 축(cross axis)의 시작 부분으로 그룹화합니다.
flex-end : 모든 flex-items를 교차 축(cross axis)의 끝 부분으로 그룹화합니다.
center : 모든 flex-items를 교차 축(cross axis)의 중앙 부분으로 그룹화합니다.
stretch : 플렉스 아이템이 플렉스 컨테이너의 전체 높이를 채울 수 있도록 늘립니다.
baseline : 베이스라인(baselines)을 따라 플렉스 아이템을 정렬합니다.

5. align-content 
flex-wrap 에서 속성이 wrap일 경우 플렉스 컨테이너는 멀티라인 컨테이너가 됩니다.
멀티라인 플렉스 컨테이너에서 아이템이 정렬하는 방법을 정의합니다. justify-content, align-items 속성 참조
default : stretch
flex-start : 
flex-end :
center :
stretch :
space-between :
space-around : 

flex items ( children 속성 )

1. order

order 속성은 컨테이너 내의 플렉스 아이템을 재정렬(reordering) 합니다.HTML 코드와는 상관없이 이뤄집니다.
default ; 0

2. flex-grow
플랙스 아이템을 컨테이너에 맞게 늘립니다.

default : 0

3. flex-shrink
플랙스 아이템을 컨테이너에 맞게 줄입니다.
default : 1

4. flex-basis

플렉스 아이템의 초기 크기를 지정합니다.

default : auto

5. align-self
 

6. flex 

flex-grow, flex-shrink, flex-basis 축약형
defaule : 0 1 auto

 

1. flex container ( parent 속성 )

display : flex, inline-flex;

flex-direction : row, row-reverse, column, column-reverse  

flex-wrap : nowrap, wrap, wrap-reverse

justify-content : flex-start, flex-end, center, space-between, space-around, space-evenly

align-items: flex-start, flex-end, center, stretch, baseline

align-content : flex-start, flex-end, center, stretch, space-between, space-around

 

2. flex items ( children 속성 )

order: 숫자(default 0)

flex-grow : 숫자

flex-shrink : 숫자

flex-basis : length, auto

align-self : flex-start, flex-end, center, stretch, baseline

3. flexbox bugs

https://github.com/philipwalton/flexbugs

4. Solved by flexbox

https://hyunseob.github.io/solved-by-flexbox-kr/