Dust

order

flex 후 출력 순서를 변경하고 싶을 때

- 기본값은 0

- 작은 값이 있는 요소부터 출력

- 값이 같다면 입력한 순서대로 출력

예시

/* 부모요소 */
inner{
 display: flex;
};
/* 자식요소 */
inner-box:first-child{
 order: 1;
};
inner-box:nth-child(2){
 order: 2;
}

align-items

교차축 요소를 정렬

- flex의 주축(main-axis)과 교차축(cross-axis)

- flex의 default 값은 row(가로정렬/주축) 이기 때문에 align-items: center; 일 경우 세로(교차축)로 가운데 정렬함

align-self

교차축 요소를 정렬

- 개별 요소에 적용할 수 있음

inner{
 display: flex;
 align-items: flex-start; 
 /* 제일 앞으로 */
};
inner-box:nth-child(3){
 align-self: flex-end;
 /* 위에 전체적으로 flex-start를 적용했지만 개별로 flex-end 적용 / 제일 밑으로 */
}

예시

flex-wrap

word-wrap와 비슷

- nowrap / 한 줄에 정렬

- wrap / 여러 줄에 걸쳐 정렬

- wrap-reverse / 여러줄에 걸쳐 반대로 정렬

예시

flex-flow

- flex-direction, flex-wrap을 같이 사용가능

row wrap, column wrap 이런식으로 한꺼번에 사용할 수 있다

row-wrap, column-wrap 아니고 하이픈(-) 없어야함

예시

inner{
 display: flex;
 flex-flow: column wrap;
         /* flex-direction | flex-wrap */
}

align-content

justify-content: 와 비슷

참고 

http://flexboxfroggy.com/#ko