[CSS] box

display:box

• box-orient

박스의 방향을 지정

box-orient : vertical은 박스를 수직방향으로 box-orient : horizontal은 박스를 수평방향으로 배치

(기본값 : box-orient : horizontal)

box-orient : inherit은 body가 갖는 기본 속성을 상속

• box-pack

박스가 정렬되는 방향 지정

box-pack : start 는 좌측/상단부터 정렬(기본값)

box-pack : end 는 우측/하단부터 정렬

box-pack : center 는 가운데로 정렬

box-pack : justify 영역에 맞게 알아서 간격을 벌려 정렬되는 속성

• box-direction

박스 정렬되는 순서 지정

box-pack : normal 은 HTML문서에 작성된 순서대로 배치(기본값)
box-pack : reverse 은 HTML문서에 작성된 반대로 배치

• box-ordinal-group

박스가 배치된 순서 변경

부모블럭이 아닌 각각의 자식블럭에게 직접 순서를 지정

#box {
    display:box;
}
#box1 {
    box-ordinal-group:2;
}
#box2 {
    box-ordinal-group:1;
}

• box-flex

박스 크기에 대한 비율 지정

부모블럭이 아닌 각각의 자식블럭에게 직접 순서를 지정
숫자가 클수록 비율이 증가

box-flex : 0 (기본값)

box-flex : 1 지정된 블럭은 감싸고 있는 부모블럭의 남은 공간을 채움