#1.0 ~ 1.3

flexBox

div는 옆으로 큰 amrgin을 가지고 있기 때문에 그 어떤 element도 옆에 둘 수 없다. 이러한 속성을 가지는 것이 display:block이다.

그리고 다른 display 속정중 하나는 inline-block이다. inline-block은 block속성을 유지하면서 box옆에 다른 element도 올 수 있게 해준다. 여기서 inline만 있는 속성은 box가 아니다. box가 아닌것은 유동적이기 때문에 너비와 높이가 없다. 같은 직선상에 존재하는것이다. Text가 line 속성을 가지고 있는것이다.

우리가 box로 margin으로 값을 넣어 줬다면 screen의 변화만으로 완벽하게 맞추었던 디자인이 파괴된다. 우린 이러한 문제점을 해결하기 위해 flexBox를 배워야 하며, 왜 기술을 배워야하는지, 이 기술로 해결하는 문제점이 무엇인지, 이러한 기술을 왜 이해해야 하는지 등을 앞으로 알아갈 것이다.

flexbox는 다음과 같은 룰이 있다.

box를 옮기고 싶다면 box를 감싸는 flexbox container를 만들어서 제어를 해야한다.

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </body>

그리고 box를 움직이기이 위해 body를 flexbox container로 만들것이다. 그리고 body에는 display : flex라고 지정하면 된다.

body {
  display: flex;
}
.box {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
}

여기서 중요한건 box에 스타일을 제외한 어떤한 내용도 적지 않았다.

또 한가지는 flexbox는 바로 위 부모가 flexbox container이어야 한다는 것이다.

flexbox css에는 row와 column이라는 두가지 속성을 가지고 있다. 여기서 flex container의 flex-direction 기본값은 row(가로)이다.

box의 정렬을 세로로 하고 싶다면 position 속성중 하나인 justify-content를 사용하는 것이다. justify-content은 수평축에 있는 flex children의 위치를 변경한다. 그리고 css에서는 수평축을 main axis라고 말한다. 그리고 세로축을 cross axis라고 부른다.

Untitled

justify-content가 main axis로 item을 움직였다면, align-items는 cross axis로 item을 움직이게 한다. 이 두가지 개념은 direction을 배울때 매우 중요한 요소이기 때문이다.

이제 flex-direction을 column을 설정하면 세로축이 main axis가 된다. 축에 대해서 정리하면 다음과 같다.