유용한 사이트

http://pxtoem.com/

http://fitvidsjs.com/

*반응형 너비 퍼센트 구하기 공식

(가변박스자식 너비 / 부모 너비) * 100

* 플렉스 쓸때 유의 사항

 부모 / 자식 너비 지정해야함 ... (단 자식이 flex:1 이런식으로 줄 경우 너비 필요없음)

부모에 적용

display: flex;

배치방향 설정

flex-direction : row(가로), column(세로)

여러줄로 배치

flex-wrap: wrap;

한줄로 배치

flex-wrap:nowrap;

배치방향 / 여러줄 배치 동시 설정

flex-flow: row wrap;

주축방향 자식 가운데 정렬

justify-content:center;

교차축방향 자식 가운데 정렬

align-items:center;

교차축방향으로 다양하게 정렬

flex-direction:column인 경우 (자식이 여러줄인 경우)

align-content: 살펴보기

----- 여기까지 부모에 스타일 줘야함 -----

----- 여기부터 자식 ------

교차축 각 자식아이템 자유롭게 배치

align-self: 옵션 살펴보기

아이템 순서 바꾸기

order:순서

크기 늘이고 줄이기

flex: [flex-grow] [flex-shrink] [flex-basis]

ex)자식이 3개인 경우 .. 각 flex-grow:1 인 경우 전체를 1/3나눈 크기를 차지

ex)자식이 3개인 경우 .. 각 flex-shrink:1 인 경우 전체를 초과한 너비를 1/3해서 줄어듦

flex-basis는 기본값

https://jsfiddle.net/xb52n24L/1/

연습용