플렉서블 박스 (Flexible Box)

* 플렉서블 박스 지정하기

- CSS3에는 기존의 박스보다 유연하게 배치할 수 있는 '플렉서블 박스(Flexible Box)'라는 것이 있음.

- 플렉서블 박스를 지정하려면 display 프로퍼티에 flexbox 또는 inline-flexbox를 입력해야 함.

- 추가하여 wrap을 지정하면 여러 줄을 만들 수 있음.

 

[HTML]
<div id="container">
    <div id="box1">BOX1</div>
    <div id="box2">BOX2</div>
</div>
 
[CSS]
#container{
    width: 300px;
    height: 150px;
    border: 6px dotted #aaaaaa;
    display: flexbox;
}
#box1{
    background-color: grey;
    width: 100px;
}
#box2{
    background-color: #eeaaaa;
    width: 100px;
    height: 100px;
}

- 플렉서블 박스가 지정된 요소의 레이아웃을 '플레서블 박스 레이아웃'이라고 함.

 

[요소의 정렬 방향]

- flex-flow 프로퍼티를 사용하면 요소의 정렬 방향을 지정할 수 있음.

- 이 프로퍼티는 플렉서블 박스에 대해 적용됨.

 

flex-flow: column;

 

row	가로 방향(순방향)   // 초기값
row-reverse	가로 방향(역방향)
column	세로 방향(순방향)
column-reverse	세로 방향(역방향)

(순방향은 문자 기술 방향)

 

[요소의 정렬 순서]

- flex-order 프로퍼티를 사용하면 요소를 표시할 순서를 지정할 수 있음.

- 동일한 번호가 있는 경우는 작성된 순서대로 정렬됨.

- 이 프로퍼티는 플렉서블 박스 안의 요소에 대해 적용됨.

 

flex-order: 2;

 

[요소의 상하 위치 맞춤]

- flex-align 프로퍼티를 사용하면 요소의 상하 위치(flex-flow:column은 좌우 위치)를 지정할 수 있음.

- 이 프로퍼티는 플렉서블 박스 안의 요소에 대해 적용됨.

 

flex-align: stretch;

stretch   // 초기값

start

end

center

baseline

 

[요소의 좌우 위치 맞춤]

- flex-pack 프로퍼티를 사용하면 플렉서블 박스 안의 행 배치를 지정할 수 있음.

- 이 프로퍼티는 플렉서블 박스에 대해 적용됨.

- flex-line-pack 프로퍼티 : 행의 위치를 맞추는 프로퍼티

 

flex-pack: center;

start    // 초기값

center

end

justify

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
flex-flow	X	X	X	X	-webkit-
flex-order	X	X	X	X	-webkit-
flex-align	X	X	X	X	-webkit-
flex-pack	X	X	X	X	-webkit-
flex-line-pack	X	X	X	X	X

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)