[CSS] display:flex 와 flex 속성 정리

가장 먼저 css 작업을 하며 헷갈리기 쉬운 속성들을 정리해보자면

block: 너비와 높이를 가지며 사진과 같이 margin이 존재한다.또한, element가 한 줄을 차지하여, 옆에 다른 element가 올 수 없어 아래로 배치된다.
inline : 같은 직선 상에 있다는 뜻으로 옆에 다른 element가 올 수 있다. 그러나 box가 아니기때문에 너비와 높이를 가질 수 없다.
inline-block: inline과 block의 속성을 모두 지녔으며, element가 일직선 상에 배치되어 옆에 다른 element가 올 수 있다.
=> 🧚🏻‍♀️ 단점: 의도치않게 공백 margin이 생기며, 특정 기기의 브라우저 사이즈에 맞게 디자인을 하기 어렵다.

이러한 문제를 해결한 것이 flex 이다 !!

1. display: flex`는 오직 부모 컨테이너에서만 선언해야한다
2. 자식 div의 위치를 바꾸고 싶을 때, 자식이 아닌 부모의 속성을 바꿔야한다.
3. flex의 기본값은 row(수평)으로 배치. 

• 만약 div를 가로로 위치설정하고 싶다면 justify-content 요소를 사용하자 !세로 방향 위치를 설정하고 싶다면 align-items 사용.

• flex-wrap
  부모인 flex는 넓이를 생각하지 않는다.
  한줄에 모든 자식들이 있게 하기 때문에 아무리 자식이 10명이어도 다음줄로 넘어가지 못하고 1줄에 낑겨서 배치된다. 이로 인해 자식의 넓이는 줄어든다 
  -> flex-wrap: wrap;
  (child의 사이즈를 유지하며 다음줄로 넘어갈 수 있다)
  -> nowrap; (child를 모두 같은 줄에 정렬하는 default값, 이때 width가 줄어들 수 있다)
  - wrap-reverse; 다음줄로 넘어가면 아래에서 위로 정렬된다.