Flexbox

1. flex- container = Parent

display : inline-block을 display : flex로 변경하기

display: flex 와 inline-flex 차이 명확히 

flex-direction : row(default) vs column // row-reverse, column-reverse

flex-wrap : nowrap(default) vs wrap...

2. Main Axis vs. Cross Axis

flex-direction : row(default) vs column // row-reverse, column-reverse

3. Flex Items = Children

align-items : stretch(default), flex-start, ...   

align-content 

justify-content

4. Gap 

만약 여러개의 요소에 margin-right를 주면 마지막 요소에 margin-right를 0로 줘야 반대로 여러개의 요소에 margin-left를 주면 처음 요소에 margin-left를 0로 줘야함. 그러나 flex에서 gap을 사용하면 요소와 요소 사이에 간경을 조절하는 속성이다. 따라서 처음 요소와 마지막 요소의 마진을 조정할 필요가 없다.

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자