css display : flex, inline, block

css에서 element를 배치하는 방법에는 block, inline, flex..등이 있다. 기본 속성을 알아보자

display : flex 

- 이해한 바로는, inline-block과 유사하다. 대신 container 라는 개념이 존재하고, 이 컨테이너에 display: flex를 준다면, 컨테이너 안의 모든 컨텐츠들은 inline으로 배치되고, 해당 부보 컨테이너는 block으로 배치가되는 개념인것같다. ( 자유롭게 배치할 수 있음 - 이부분에 대해서는 실습을 통해 더 알아봐야할것같다.)

- 또, 해당 부모에 flex를 설정하면 바로 child에만 이 속성이 적용되고 chlid-chlid에게는 적용되지 않는다!!

 

display : inline

- 줄바꿈 없이 해당 컨텐츠 만큼의 공간만 잡아먹는다. 때문에 width, height 설정을 무시해버린다..!!!! 또한 margin과 padding 속성또한 좌우만 반영되고 상하는 반영되지않는다.

ex) span, a

 

display : block

- 다른 element를 밀어내고 자기혼자 한줄을 차지해버린다.  width, height, margin, padding 전부 반영! 

ex) div (div 태그는 display : block이 기본 속성이다.) , h1, p

 

display : inline-block

- 기본 속성은 inline과 같다. 허나  width, height, margin, padding 전부 반영가능하다. 대신 display: inline-block이라는 말을 명시해주어야한다.