display: flex; 와 flex-direction, 플렉서블박스의 이해

예를 들어 이러한 html이 있다고 가정을 해봅니다.

이렇게 style을 주게되었을 때

부모인 #wrap 을 '플렉서블 박스' , 자식인 box와 box2 는 '플렉스 아이템' 이라고 부릅니다.

* flex-direction 값을 주지않고 display: flex; 만 넣어주면 row가 기본값으로 들어가게 됩니다.

플렉스의 방향을 설정

( flex-direction )

가로 - 수평(h) - row

세로 - 수직(v) - columm

* reverse : 역방향

row-reverse : 우 -> 좌

ex)

1 - 2 - 3 을 row-reverse 주게 되면 3 - 2 - 1 로 배치가 됩니다.

columm-reverse : 아래 -> 위

ex)

1 3

2 2

3 을 columm-reverse 주게 되면 1 로 배치가 됩니다.

플렉서블박스 (Flexible Box) 를 이용하는 이유이자 장점은

' 가변적인 박스를 아주 손쉽게 만들 수 있다'

플렉서블박스 (Flexible Box)가 등장한 이유

CSS 속성중에는 박스를 배치하는 기술이 많이 있어요. 하지만 그 기술들 중에는 배치라는 단어와는 무관한 기술들도 많죠. 예를 들어 플로트(Float)라는 속성은 '띄우다'라는 의미로, 배치와는 전혀 상관이 없습니다.

이처럼 의미 없는 기술들을 사용하던 중에 '배치'라는 의미와 정확하게 부합하는 기술이 등장했습니다. 바로 플렉서블박스(Flexible Box) 라는 기술입니다. 플렉서블 박스는 CSS3에서 처음 소개된 속성으로, 반응형 웹 제작에 반드시 필요한 가변적인 박스를 만드는 기술이 들어 있기 때문에 플렉서블 박스(가변적인 박스)라는 이름으로 불리게 되었습니다.

display: inline-flex;