CSS skills(4) - display:flex;

 

이번 포스팅에서는 display:flex;에 대해 알아보도록 하자.

지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 엘리먼트들의 경우 아래와 같이 부모 엘리먼트에 padding을, 자식 엘리먼트에 margin을 부여해서 컨텐츠들을 정렬하였다.

이번에 알아볼 display:flex;는 이러한 복잡한 방식을 동원하지 않고도 좀 더 편하게 레이아웃을 구성할 수 있게끔 도와주는 속성이다. 한마디로, 레이아웃을 구성할 때 알아두면 무척 편하고 좋은 속성이다. 

 

위의 그림과 같이 레이아웃이 구성되어 있다고 했을 때 display:flex;는 container에 그 속성값을 부여한다. 다시말해, display:flex;는 정렬의 주체가 부모에게 있다. 부모 엘리먼트에 display:flex; 속성을 부여하고 자식 엘리먼트를 어떻게 정렬할지 정해주는 방식이다. display:flex;가 부여됐을 때 적용할 수 있는 여러 속성들을 사용해서 container 안의 item들을 정렬하게 된다. 

 

display:flex;에서의 핵심 포인트는 다음의 두가지 이다.

 

• display:flex;에는 container에 꾸며줄 수 있는 속성값과 item 각각에 꾸며줄 수 있는 속성값이 있다.
• display:flex;를 적용할 때는 두가지 축이 있는데, 하나는 중심축(main axis)이고 다른 하나는 반대축(cross axis)이다. 그리고 이 축은 수평방향이냐 수직방향이냐에 따라 바뀔 수 있다.

해당 포스팅에서는 display:flex;에 사용되는 속성들에 대해서는 간략히 언급만하고 넘어가도록 하겠다. display:flex;에 사용되는 속성들의 자세한 효과에 대해 알아보기 위해서는 구글에 "flex 게구리게임"을 검색해서 해당 게임을 플레이 해보길 바란다. 또한 flex 속성에 대해 자세한 가이드가 나와있는 사이트도 첨부하도록 하겠다.

 

container에 적용하는 속성들

• flex-direction: row / column / row-reverse / column-reverse ;  아이템들의 정렬을 row방향으로 하거나  column방향으로 할 수 있다. 기본값은 row;
• flex-wrap: wrap ;  아이템들이 한줄에 꽉 차게 되면 자동으로 다음 라인으로 넘어간다. 기본값은 nowrap;
• flex-flow: row nowrap;  위의 두가지를 한번에 사용하게 해주는 속성.
• justify-content: flex-start / flex-end / center / space-around / space-evenly / space-between ;  중심축 기준 아이템들을 어떻게 배치할지 결정하는 속성.
• align-items: flex-start / flex-end / center / baseline ;  반대축에서 아이템들을 어떻게 배치할지 결정하는 속성.

item에 적용하는 속성들

• flex-grow , flex-shrink  :   container의 사이즈가 바뀌었을 때 item들이 얼마나 늘어나고 줄어들어야 하는지를 결정하는 속성.
• align-self: flex-start / flex-end / center / baseline  :  아이템별로 아이템들을 정렬하고 싶을 때 사용하는 속성.

 

 

 

 

 

 

https://flexboxfroggy.com/#ko  =>  flex 개구리 게임

https://css-tricks.com/snippets/css/a-guide-to-flexbox/  =>  flexbox 가이드