Flexbox.1 (css-master)

기본적으로 블럭요소는 옆에 아무것도 올 수 없다.

그저 아래로 쌓아나갈 뿐이다.

이것을 없애주는 것은 display: inline-block으로 옆으로 위치 할 수 있게한다.

근데 display property에는  inline이라는 값도 있다.

무슨 차이인가?

인라인은 박스가아니다. 유동적인 요소라 너비와 높이가 없다. 그저 직선상에 있다는 의미이다.

예를들면 텍스트가 그렇다.

.box {

  background-color: blue;

  width: 100px;

  height: 100px;

  margin-bottom: 2px;

  display: inline-block;

}

이런 코드가 있다고 생각해보자 저상태면 

이렇게 박스가 설정 된다.

근데 inline-block을 inline으로 바꾼다면? 화면에 노출 되지 않는다!

왜냐 인라인 요소는 높이와 너비를 가질 수 없기 때문이다. 아에 인라인으로 바꾸었기 때문에 block의 속성을 모두 잃는 것.

 

근데 여기서 inline-block에 단점이 또 나타난다. 코드에는 옆 블럭과 마진이라던지 어떤 간격도 주지 않았지만

간격이 생겨있다.

이박스들의 간격을 일정하게 하거나 레이아웃상에 임의에 위치에 두려고 마진을 조정하거나 할 수 잇지만

문제는 화면 사이즈에 따라 위치가 뭉개져 버리는 현상이 생긴다.

좋지 않은 것이다 inline box는...문제가 너무 많다.

 

이런 문제를 해결 할 수 잇는 방법이 flexbox이다.

그러나 이런 flexbox도 문제가 있다고 한다. 이를 보완한것이 grid이다.

자 이제부터 flexbox에 대해서 파헤쳐 보자.