(번역) CSS flex box 3분만에 배우기

이 글을 통해 CSS flexbox 레이아웃의 가장 중요하고 기본적인 컨셉을 배웁니다.

 

The container and the item

  • flex box 레이아웃에서 가장 중요한 컴포넌트 두 개는 container(파랑)items(빨강) 입니다.
  • 이 컴포넌트들을 이용하여 예제를 설명하겠습니다.

수평 레이아웃

  • container 에 아래와 같이 CSS 를 줍니다.
.container {
display: flex;
}
  • 위 결과는 아래와 같습니다.
flex-2
여기서 주의할 점은 items 는 전혀 손대지 않고도, 수평축을 따라 알아서 정렬됩니다.

 

수직 레이아웃

  • 위 이미지를 보면, 중심축은 수평축이고 교차축은 수직축입니다.
  • 아래처럼 flex-direction: column 을 추가하면 이 두 개의 축을 전환할 수 있습니다.
.container {
display: flex;
flex-direction: column;
}
flex-3
이제 중심축은 수직축이고, 교차축이 수평입니다. 따라서 위처럼 items 가 수직으로 정렬되어 쌓입니다.

 

Justify content and Align items

  • items 을 다시 수평으로 만들려면, flex-directioncolumn 에서 row 로 바꾸면 됩니다.
  • 축을 이해해야하는 중요한 이유는 justify-contentalign-items 와 같은 속성들은, 중심축과 교차축에 기준하여 items 을 정렬하기 때문입니다.
  • justify-content 를 이용하여 items 들을 중심축의 중앙에 정렬해봅니다.
.container {
display: flex;
flex-direction: row;
justify-content: center;
}

flex-4

  • 이제, align-items 를 이용하여 교차축의 중앙에 정렬해봅니다.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

flex-5

  • justify-contentalign-items 의 속성 값은 아래와 같습니다.

justify-content:

  • flex-start(default)
  • flex-end
  • center
  • space-between
  • space-around

align-items:

  • flex-start(default)
  • flex-end
  • center
  • baseline
  • stretch

Items

  • 축에 따른 전체적인 정렬 말고도, 각각의 아이템에 CSS 효과를 줄 수 있습니다.
  • 아래는 align-self 속성을 이용하여 첫 번째 item 의 위치를 조정한 것입니다.
.item1 {
align-self: flex-end;
}
/* align-self 는 align-item 속성과 같은 옵션 값들을 가집니다. */

flex-6

Conclusion

  • 위의 3가지 컨셉이 CSS flex-box 를 이해하는데 있어 가장 중요하고 응용하는데 사용된다.
  • 이 글의 원문은 여기를 참고하세요.
Advertisements

Author: Josh Jang

Mobile & Web Enthusiast, calling myself a geek. Interested in developing stuffs to make it easier for people and increasing productivity in what people have to do. True Beer Geek.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s