[Flex] 수평과 수직

css 속성 중 보다 쉽게 정렬할 수 있는 Flex에 대해 정리해보겠습니다.

먼저 아래 mozilla에서 설명해놓은 곳에서 브라우저 호환성을 확인하신 후 사용하시면 좋을 것 같습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

 

첫 번째로 가장 기본적인 수평과 수직으로 쌓는 방법입니다.

 

Flex를 사용하여 수평으로 쌓는 방법

 

<div class="container">
  <div class="items">item1</div>
  <div class="items">item2</div>
  <div class="items">item3</div>
</div>

 

.container {
  display: flex;
}
.items {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 1px solid #333;
  border-radius: 10px;
  margin-right: 10px;
}

flex container안에 있는 items의 주 축을 설정하는 속성인 flex-direction의 default 값은 row이기 때문에 코드에 작성하지 않아도 수평으로 나열됩니다.

기본적인 row의 반대 축으로 나열해주고 싶다면, 아래와 같이 row-reverse를 사용할 수 있습니다.

 

Flex를 사용하여 수직으로 쌓는 방법

 

flex-direction 속성을 활용하여 items의 주 축을 수직으로 설정해줍니다.

수직으로 쌓기 위해 column 값으로 설정해줍니다.

 

.container {
  display: flex;
  flex-direction: column;
}
.items {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 1px solid #333;
  border-radius: 10px;
  margin-bottom: 10px;
}

 

아래 오른쪽 이미지와 같이 column-reverse를 사용하여 items를 반대축으로 나열해줄 수 있습니다.

 

두 번째 노트에서는 아이템들의 여러 줄 묶음인 flex-wrap에 대해 정리해보겠습니다.

 

마지막으로 Flex를 게임처럼 배울 수 있는 곳도 소개해드릴게요.

👉🏼 http://www.flexboxdefense.com/

Flexbox Defense