【CSS】display: flex;를 사용한 반응형 웹 디자인에 편리한 플렉서블 박스(flexible box, flexbox)의 개념《1》

지금까지 플렉서블 박스(flexible box)의 작성에 적용되어 왔던 "display : box"와 "display : flexbox"의 기술 방법은 이젠 오래된 방법이 되어 버렸습니다.

CSS의 유연한 레이아웃이 새롭게 다시 정의되었습니다. 플렉서블 박스(flexible box, flexbox)는 복잡한 웹 사이트의 다양한 화면 크기와 디스플레이 장치에 유연한 페이지 레이아웃을 실현할 수 있는 CSS3의 새로운 레이아웃 모듈(Flexible Box Layout Module)입니다.

복잡한 레이아웃도 쉽게 반응형 레이아웃을 구현할 수 있습니다. Flex 아이템(Flex Item)이라는 여러 자식(子) 요소를 내포한 flex 컨테이너(Container)의 부모(親) 요소로 구성되어 있습니다.

Flex 박스는 부모 요소에 "display : flex;"을 지정함으로써, float와 clearfix, 의사(擬似) 요소를 사용하지 않아도 유연한 레이아웃을 구현할 수있는 것이 특징입니다.

Flex container(플렉스 컨테이너)

flex 아이템을 포함하는 부모(親) 요소입니다. Flex 컨테이너는 display 속성 값에 flex 또는 inline-flex를 "display : flex", "display : inline-flex"로 지정하여 정의됩니다.

Flex item(플렉스 아이템)

flex 컨테이너의 자식(子) 요소로서 flex 아이템입니다. 부모 요소인 flex 컨테이너에 flex 속성 값을 지정함으로써 자식 요소는 자동으로 flex 아이템이 됩니다.

CSS에서 별도로 지정할 필요가 없습니다.

Main-axis(주축,主軸)

Flexible 박스는 2개의 축(軸)을 가지고 있습니다. Flex의 부모 요소인 flex 컨테이너(flex container)에는 main-start (시작)과 main-end(끝)이 있습니다.

이 두 점을 연결한 것이 main-axis(주축)이며, 평행한 축입니다.

Cross-axis(교차축,交差軸)

Main-axis(주축)에 대한 수직 축을 나타냅니다. Main-axis가 Horizontal의 경우 Cross-axis는 Vertical이 됩니다.

flexible box 지정하기

Flexbox의 레이아웃을 사용하려면, HTML의 부모 요소의 display 속성에 "flex"를 지정하면 됩니다. 아래와 같이 해당 요소를 flex 컨테이너로써, 자식 요소를 flex 아이템으로 정의합니다.

Flex 속성 값은 flex 컨테이너를 블록 레벨 요소로 지정합니다. inline-flex 값은 flex 컨테이너를 인라인 레벨 요소로 지정합니다.

CSS

</style>
 .main_flex {
　　display : flex;
　　display : -webkit-flex;
　　}

 .main_inline-flex {
　　display : inline-flex;
　　display : -webkit-inline-flex;
　　}
</style> 

flex-direction

justify-content(수평 방향의 정렬)

align-items(수직 방향의 정렬)