HTML CSS 레이아웃 Flex

웹 페이지는 레이아웃이라는 개념이 존재합니다. 

레이아웃이 의미하는것이 무엇이냐면, 아래의 Lush 홈페이지를 예로 들어보겠습니다.

빨간선으로 구분해 놓은것처럼 웹페이즈를 개발자가 원하는 구역으로 나누어 놓은 하나 하나를 각각의 레이아웃이라고 표현합니다.  

 

이런 레이아웃을 사용할때 가장 많이 사용되는 방식이 Flex와 Grid입니다. 

간단하게 설명하자면, 

 

Flex의 경우에는 1차원적으로 수평, 수직으로 레이아웃을 정하는 방식입니다. 

그림과 같이 Flex 태그안에 있는 item들의 방향을 정하는데 그 방향을 row나 column 두가지의 방법을 이용하여 정하는 것입니다. 

Flex의 경우 display : flex; 를 통해 설정할 수 있습니다.

display : flex의 기본값은 row이고, 상하로 정렬하고싶으면

flex-direction : column으로 설정하면 상하로 정렬이 됩니다.