[CSS] display: flex

1. display: flex의 정의

flex는 유연성을 뜻하는데, 요소들을 자유자제로 위치시키는 속성이다. 이 속성을 통해 동적으로 변경가능한 순서를 지정할 수 도 있고, 가용한 공간내에서 크기와 위치를 자동으로 조정하기도 한다.

2. 사용방법

콘텐츠를 감싸는 부모요소에 이 속성을 지정해준다.

<style>  .container { display: flex; } </style> <div class="container"> <nav></nav> </div>

3. 브라우저 호환성

속성
display: flex;	IE10+(hybrid)	CH21 이상(modern), CH20 이하(old), An2.1 이상(old)	FF2~21(old), FF22이상(modern)	SF3.1 이상(old), iOS3.2 이상(old)

4. 결론

 CSS flex-box 를 이해하는데 있어 가장 중요하고 응용하면 좋을것 같다.