diaplay flex

CSS skills(4) - display:flex;

이번 포스팅에서는 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 엘리먼트들의 경우 아래와 같이 부모 엘리먼트에 padding을, 자식 엘리먼트에 margin을 부여해서 컨텐츠들을 정렬하였다. 이번에 알아볼 display:flex;는 이러한 복잡한 방식을 동원하지 않고도 좀 더 편하게 레이아웃을 구성할 수 있게끔 도와주는 속성이다. 한마디로, 레이아웃을 구성할 때 알아두면 무척 편하고 좋은 속성이다. 위의 그림과 같이 레이아웃이 구성되어 있다고 했을 때 display:flex;는 container에 그 속성값을 부여한다. 다시말해, display:flex;는 정렬의 주체가 부모에게 있..