[css] 초보자를 위한 화면 정렬 - flex 키워드

자바스크립트/CSS를 처음 하는 입장에서는

화면 구성을 어떻게 해야 할지 잘 보이지 않는다.

UI 컴포넌트를 수평으로 두어야 할지, 수직으로 둬야 두려면 flex를 사용한다. 

그리고 가운데 정렬할 지에 대한 내용은 간단하게 아래 키워드를 사용한다.

.container {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

}

간단한 개념에 대한 설명 자료는 다음과 같다. 

https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/

아주 자세한 내용은 다음을 참조한다.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://msdn.microsoft.com/ko-kr/library/bg124109(v=vs.85).aspx