[CSS] 플렉서블 박스(Flexable Box)

플렉서블 박스(Flexable Box)

플렉서블 박스는 간단히 플렉스 박스(FlexBox)라고도 하는데 박스를 쉽게 가변적으로 만들어 주고 동시에 반응형 웹을 위한 몇 가지 기능도 제공해주는 최신 기술이다. 플렉스 박스는 컨테이너(Container)와 아이템(Item)이라는 두 개의 개념이 필수적으로 존재해야 한다.

아이템이 컨테이너 안에 들어 있게 된다.

 

Flex Box 장점

• 콘텐츠를 수평 방향으로 쉽게 중앙 정렬할 수 있다.
• 뷰 포트의 너비에 따라 요소의 배치 순서를 달리 할 수 있다.
• 박스 내 요소의 여백과 배치를 자동으로 조절 할 수 있다.

Flex Direction의 속성 값

row	기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우)
row-reverse	속성 값 row와 동일하나 배치 순서가 반대임(좌<-우)
column	플렉스 박스의 아이템을 수직 방향으로 배치
column-reverse	속성 값 column과 동일하나 배치 순서가 반대임

 

display:flex;

<style>
        .container {display:flex; height: 200px; border: solid 3px red;}
        .items {width: 100%; height: 150px;}
        .items:first-child {background-color: purple;}
        .items:nth-child(2) {background-color: pink;}
        .items:last-child{background-color: orange;}
</style>

 

display:flex; flex-direction: column;

<style>
        .container {display:flex; flex-direction: column; height: 200px; border: solid 3px red;}
                        /*수직방향으로 정렬*/        
        .container div {width: 50%; height: 80%;}
        .container div:first-child {background-color: lightgreen;}
        .container div:nth-child(2) {background-color: yellow;}
        .container div:nth-child(3) {background-color: lightblue;}
</style>