Flexbox 기본 다지기 :: 마이구미

이 글은 flex 레이아웃에 대한 기본적인 이해를 도와줄 것이다.

글에서 다루는 것들만 이해해도 많은 이점을 얻게 된다.

예제는 하단 또는 다음 링크를 참고바란다.

flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.

또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다.

Flexbox 기본 - https://codepen.io/mygumi/pen/vewOoY 

Flexbox 응용 - https://codepen.io/mygumi/pen/ZMGaPm

다음 글 Flex 기본 2(flex-wrap, flex) - https://mygumi.tistory.com/344

Flexbox 란 무엇인가?

Flexible boxes 또는 flexbox라고 불리는 CSS3의 새로운 레이아웃 모드이다.

Flexbox를 사용하면 페이지 레이아웃이 다른 화면 크기나 다른 장치에서 요소들이 예상한대로 배치된다.

이름처럼 유동적이기에, float 사용 및 margin 이슈 등을 비롯해 기존 block 모델보다 개선된 기능을 제공한다.

Flexbox를 사용하기 위해서는 어떻게 해야하는가?

css 속성 중 display를 사용하면 된다.

display: flex; // block
display: inline-flex; // inline

Flexbox를 사용하기 위해서는 2가지만 이해하면 충분하다.

그것은 주축(main-axis)과 교차축(cross-axis) 이라는 용어가 된다.

말 그대로 축. x/y 축, 수평과 수직이라고 보면 된다.

주축이 수직이라면, 교차축은 수평. 주축이 수평이라면, 교차축은 수직이다.

기본적으로 display: flex를 사용시 float: left를 쓴것과 같은 모습을 볼 수 있다.

여기서 주축은 수평이 되고, 교차축은 수직이 된다.

Item을 수직으로 보고 싶다면, 현재의 축을 반대로 적용하면 된다.

적용하기 위해서 flex-direction 속성을 사용한다. (디폴트 값은 row 이다.)

flex-direction: column; // row or column. etc...

축의 전환으로 다음과 같은 모습을 볼 수 있다.

이제는 Item 들을 중앙으로 배치하고 싶을 것이다.

이러한 주축과 교차축을 이용해서 Item들을 정렬할 수 있다.

그때 사용하는 속성들이 justify-content와 align-items 이다.

justify-content: center; // 주축
align-items: center; // 교차축

justify-content 속성은 주축을 기준으로 정렬한다.

반대로 align-items 속성은 교차축을 기준으로 정렬하게 된다.

속성을 활용한 예는 다음과 같다.

----------------------------------------------------------------------------------------------------------------------------------------------------------------

display: flex;
justify-content: center;

----------------------------------------------------------------------------------------------------------------------------------------------------------------

display: flex;
align-items: center;

----------------------------------------------------------------------------------------------------------------------------------------------------------------

display: flex;
justify-content: center;
align-items: center;

----------------------------------------------------------------------------------------------------------------------------------------------------------------

See the Pen flex - final by leejunghyun (@mygumi) on CodePen.

다음 글 Flex 기본 2(flex-wrap, flex) - https://mygumi.tistory.com/344