[CSS3] flexible layout (display: flex 관련)

들어가며

앞으로 CSS에서 가장 기대하고 있는 부분이 바로 레이아웃 컨트롤이다.

flex와 같은 CSS가 보편화되면 아마 퍼블리싱이 훨씬 수월해 질 것 같다.

*display: flex 의 경우는 IE에서 11을 제외하면 동작하지 않는 문제점이 있다.

[참고] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[참고] http://ko.learnlayout.com/flexbox.html

실습

#1. NTS 프론트엔드개발팀에서 유투브에 공유한 영상을 보고 간단한 flexible layout을 만들어봤다.

정말 간편하고 간결하다. CSS 만으로 dom 위치를 훨씬 유연하게 컨트롤 할 수 있다는 점이 가장 좋다.

#2. flex-direction: column || column-reverse 를 통해 오름차순/내림차순을 쉽게 구현 할 수 있다.

#3. Pinterest layout(Masonry layout)와 비슷한 레이아웃을 구현 할 수 있다.

* 언뜻 보기에는 비슷한데, Pinterest의 ordering 방식과 다르니 주의할 것!