자바스크립트/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




Posted by 김용환 '김용환'