CSS : flex 와 Grid

Flex

flex 는 기기의 속성에 따라 디자인이 유동적으로 바뀌지 않는 CSS의 단점을 개선하기 위해 사용된다.

요소의 사이즈가 불명확하거나 동적으로 변화할때 유용하게 사용할 수 있다.

 

단, 부모가 flex-container 이어야만 자식 element 를 움직일 수 있다.

 

FlexBox layout 에서 content, items, self 의 차이

 

 

Grid

주요 properties

grid-auto-rows ( / [column])

grid-auto-flow : row(default) ( / [column])

 - 내가 지정한 grid보다 더 많은 cell 들이 생성될 때, 추가 생성되는 cell 들을 어디로 생성할지 결정

 

minmax   -  element 크기 변화에 limit 을 준다. ( 최대값을 fr 혹은 auto로 할 때 )

 

auto-fill / auto-fit   -   repeat farction에만 사용한다. auto-fill 은 주어진 사이즈에 가장 많은 cell 들을 만들고, auto-fit은 만들어진 cell을 최대한 늘려서 공간을 채운다.

 

 

** grid-column-start / grid-column-end property 는 각 요소가 어디서 끝날 지를 지정함으로써 grid layout 을 만들 수 있는데 이때 각 value 값은 grid의 순서가 아닌 line의 순서로 결정된다.

 

*** 위 기능은 grid-column : [grid-column-start] / [grid-column-end] 로 간소화할 수 있다.

span 을 통해 grid의 cell 몇칸 차지할 지 지정할 수도 있는데, 이때는 반드시 시작점이 있어야 정상 작동한다.

ex)     grid-column : 2 / span 2 

2번째 line에서부터 2칸 차지한다.

 

 

** grid-template-areas property 를 사용하여 각 grid layout를 만들 수 있는데,  그 전에 하위 element 에 grid-area property 를 사용하여 각 grid cell 에 name을 지정해줘야 하고 이때 name 은 String 이면 안된다. ( 각 grid의 name value  " " 로 감싸져 있으면 안된다.  

 

참고자료

https://poiemaweb.com/css3-flexbox

CSS3 Flexbox Layout | PoiemaWeb

https://webclub.tistory.com/628

모던 레이아웃 - 플렉스박스(Flexbox)

https://heropy.blog/2019/08/17/css-grid/

CSS Grid 완벽 가이드

css-tricks.com/

CSS-Tricks