소개

요소를 정렬하고 싶습니다.

sample.html

<div class="contents">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

sample.css

.item{
  width: 100px;
  height: 100px;
  background-color: black;
  margin:30px;
}

지금까지 ...

이런 때는・・・
부모 요소에 display: flex;를 걸어 버립니다.

sample.css

.contents{
  display: flex;
}

했어! ! !

마지막으로

display: flex;라는 이름의 울림을 사랑합니다.