당신이 원하는 flex는 flex-wrap:wrap;(html style, css)

반응형 웹페이지가 주가 되고 있는 지금, 웹페이지 상에 배열하는 아이템들도 화면 비율에 따라 알아서 배치되었으면 한다. 이전에는 float 등을 많이 사용했지만,

요즘 세대는 flex를 많이 사용한다. 별도의 기다란 코드를 칠 필요 없기 때문이다.

 

flex란?

html에서 flex는 화면 비율에 자연스럽게 아이템을 나열하는 컨테이너다.

기본 사용 구문은

<div style="display:flex;"/>

다. 

 

그런데 이 것만 쓰면 기본 flex-wrap 속성이 no wrap이기에

가로 비율을 줄여도, 가로 길이를 줄여도 컨테이너 안에 있는 아이템의 가로를 줄일지언정 배열을 그대로 유지한다.

하지만 우리가 보통 원하는 flex는 그게 아니다.

배열을 포기하더라도 아이템들을 왜곡하지 않게 하는 flex가 바로~~~~

wrap이다.

 

즉,

<div style="display:flex; flex-wrap:wrap;"/>

이렇게 사용하는 것이다. 이것이 진정한 flex~~~다.

 

여기다. direction속성을 사용하면 가로로 스크롤을 생성하게 만들 수 있으니 참고바란다.