Flex 개요

flex는 수직이나 수평 정렬에 관련된 CSS 속성이라고 보면 된다.

 

<div class="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

.container{
  border: 2px solid red;
}

.container .items{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  display: inline-block;
}

inline-block을 사용하면 문제점

display: inline으로 설정하면 inline요소로 바뀌기 때문에 width와 height값이 적용되지 않는 모습을 볼 수 있기 때문에, display: inline-block으로 해야한다. 또한 문제점은 items는 inline요소가 되었기 때문에 화면에 출력된 모습을 보면 margin값을 넣지 않았는데도 서로 한칸씩 떨어져있는 모습도 볼 수 있다. 이러한걸 방지하기 위해서 두가지 방법이 있다.

 

 

 

1. clearfix를 이용함

<div class="container clearfix">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

.clearfix::after{
  content:"";
  display: block;
  clear: both
}

.container{
  border: 2px solid red;
}

.container .items{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  float: left;
}

clearfix를 이용한 block요소 다루기

clearfix만 미리 선언해놓으면 많이 사용하는 방식이다. 하지만 float만으로도 완벽한 수평정렬을 하는 전문적인 선언 방식이 아니기 때문에 다른 방법을 사용하는것이 좋다.

 

 

 

2. display: flex

<div class="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

.container{
  border: 2px solid red;
  display: flex;
}

.container .items{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
}

display: flex를 이용한 수평정렬

clearfix를 따로 선언하지 않고도 이렇게 간단하게 끝낼수 있다. 부모요소에 display: flex만 선언하면 수평으로 정렬이 가능하다.