css flex에 대해

display: flex는 프레임을 짜는데에 많은 도움을 주고있다.

flex의 두개의 축

flex-direction

row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따른다.

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따른다.

flex-wrap

flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다. 기본값은 nowrap 이다.

flex-grow

flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 쉽게말해 화면 사이즈가 커졌을때 남은 여백을 이용해 사이즈를 할당한다.

flex-shrink

flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된. 이것도 쉽게말해 화면 사이즈가 작아졌을때 여백을 이용해 사이즈를 할당한다.