Grid CSS : display:flex, display:box

특정 영역안의 여러 박스들을 세로 또는 가로 정렬을 해주는 속성으로, 일종의 float, 또는 table, table-cell과 비슷하다고 생각하면 될 것같다.

display: box - is a version of 2009

display: flexbox - is a version of 2011

display: flex - is the actual version

현재 최신버전은 display:flex이지만, 버전이 낮을 경우 안먹히기때문에 다음처럼 써주는 것이 좋다.

(안드로이드 4.4.2버전에서 먹히지 않았다.)

div{
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}

참고 : 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox