[드림코딩 Css] Flex-box

Flex-box란?

박스와 아이템들을 행과 열로 자유자재로 배치할 수 있는유용한 것들이며 박스가 커지면 어떤식으로 아이템들이 공간에 배치되어야 하는지 알 수 있다.

 

flexbox에는 중심축과 반대축이 있다는 것을 생각하고 구현을 해보자 중심축이 어디냐에 따라서 어떻게 정렬할 지가 바뀌기 때문이다.

 

100% 와 100vh 등등 쓰는 단위로 인해서 일어나는 차이를 알아보자

100% === container가 속해있는 부모의 크기에 100%로 맞추겠다는 것

100vh === 부모에 상관없이 보이는 viewPortGeight을 쓰겠다는 의미

 

container 와 item으로 나누고 두개의 속성을 각각 알아보자

 

container 

• display; (속성을 지정한다 flex, block 등등)   
• flex-direction;   
• flex-wrap; (item의 크기가 container를 꼭하면 다음으로 넘어간다.)   
• flex-flow; (flex-direction + flex-wrap)   
• justify-content; (item의 배치를 결정한다 기본값은 중심축을 기준으로 배열하며 space-arounnd 등등 여러가지 있음)   
• align-items;  (반대축에 어떻게 정렬할지 정해준다. 중심축이 가로정렬에 대한 얘기라면 align-items는 반대축인 세로에 대한이야기를 한다 baseline 등등)    
• align-content;  (반대축의 아이템을 지정한다 space-bteween 등등)

 

item 

order;  (숫자를 넣으면 item의 정렬 순서가 바뀐다 애초에 배치를 잘하면 되지 혹은 중요표시해서 앞으로 땡겨올 때 쓸 수도 있을 듯) 

flex-grow; (페이지를 줄였다가 늘렸다가 했을 때 고유값을 넘어가도 그 비율에 맞춰서 크기를 채우려 하는 것)   

flex-shrink;  (점점 작아졌을 때 grow의 반대역할) 

flex-basis;  (아이템이 공간을 얼마나 차지해야하는지를 명시할 수 있다)

align-self;  (아이템 하나의 위치만 따로 배치하고 싶을 떄 사용한다)

 

기타 툴

color tool and flex frog

 

이걸로 CSS가 끝이났다고 생각하지말고 키워드로 생각해서 search할 때 써먹어보자.