Ví dụ về thuộc tính box

Chuẩn bị

Trước khi xem ví dụ thuộc tính box-align chúng ta hãy chuẩn bị một số bước sau:

HTML viết:

<html>
<head></head>
<body>
<div>
<div class="blue">box01</div>
<div class="red">box02</div>
<div class="yellow">box03</div>
</div>
</body>
</html>

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi chưa có box-align:

box01
box02
box03

Thêm display: box vào CSS ta có:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    
    /* Firefox */
    display:-moz-box;
    
    /* Safari and Chrome */
    display:-webkit-box;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có display: box

box01
box02
box03

Thuộc tính box-align với giá trị star

Thuộc tính box-align với giá trị star: Thành phần sẽ nằm về phía trên cùng của thành phần bao ngoài.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-align: start;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-align: start;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-align: start;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-align: start

box01
box02
box03

Thuộc tính box-align với giá trị end

Thuộc tính box-align với giá trị end: Thành phần sẽ nằm về phía dưới cùng của thành phần bao ngoài.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-align: end;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-align: end;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-align: end;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-align: end

box01
box02
box03

Thuộc tính box-align với giá trị center

Thuộc tính box-align với giá trị center: Thành phần sẽ nằm giữa thành phần bao ngoài (theo chiều thẳng đứng).

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-align: center;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-align: center;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-align: center;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-align: center

box01
box02
box03

Thuộc tính box-align với giá trị baseline

Thuộc tính box-align với giá trị baseline: Thành phần sẽ nằm theo đường cơ bản (baseline), giá trị được áp dụng đối với các box theo chiều ngang (box-orient: horizontal).

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-align: baseline;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-align: baseline;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-align: baseline;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-align: baseline

box01
box02
box03

Thuộc tính box-align với giá trị stretch

Thuộc tính box-align với giá trị stretch: Thành phần sẽ được nới rộng để phù hợp với thành phần bao ngoài.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-align: stretch;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-align: stretch;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-align: stretch;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-align: stretch

box01
box02
box03

Thuộc tính box-direction với giá trị normal

Thuộc tính box-direction với giá trị normal: Hiển thị thành phần từ trên xuống dưới hay từ trái sang phải, đây là dạng mặc định.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-direction: normal;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-direction: normal;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-direction: normal;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-direction: normal

box01
box02
box03

Thuộc tính box-direction với giá trị reverse

Thuộc tính box-direction với giá trị reverse: Hiển thị thành phần từ dưới lên trên hay từ phải sang trái.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-direction: reverse;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-direction: reverse;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-direction: reverse;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-direction: reverse

box01
box02
box03

Ta thấy tất cả vị trí của thành phần con bên trong đều đã bị đảo ngược theo chiều ngang.

Kết hợp với thuộc tính box-orient: vertical, CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-orient: vertical;
    box-direction: reverse;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-direction: reverse

box01
box02
box03

Ta thấy tất cả vị trí của thành phần con bên trong đều đã bị đảo ngược theo chiều dọc.

Thuộc tính box-flex

Thuộc tính box-flex: Ưu tiên linh hoạt theo các thành phần khác.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    
    /* Firefox */
    display:-moz-box;
    
    /* Safari and Chrome */
    display:-webkit-box;
}

div.blue { 
    background: #0000ff;
    box-flex: 2;
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
}

div.red {
    background: #ff0000;
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
}

div.yellow {
    background: #ffff00;
    box-flex: 3;
    -moz-box-flex: 3;
    -webkit-box-flex: 3;
}

Hiển thị trình duyệt khi có box-flex

box01
box02
box03

Thuộc tính box-ordinal-group

Thuộc tính box-ordinal-group: Cho biết thứ tự ưu tiên của các thành phần.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    
    /* Firefox */
    display:-moz-box;
    
    /* Safari and Chrome */
    display:-webkit-box;
}

div.blue { 
    background: #0000ff;
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
}

div.red {
    background: #ff0000;
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
}

div.yellow {
    background: #ffff00;
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
}

Hiển thị trình duyệt khi có box-ordinal-group

box01
box02
box03

Ta thấy thứ tự của các thành phần đã được sắp xếp lại.

Thuộc tính box-orient với giá trị block-axis

Thuộc tính box-orient với giá trị block-axis: Định dạng thành phần dọc theo khối trục.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-orient: block-axis;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-orient: block-axis;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient: block-axis;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-orient: block-axis

box01
box02
box03

Thuộc tính box-orient với giá trị horizontal

Thuộc tính box-orient với giá trị horizontal: Định dạng thành phần từ trái sang phải theo chiều ngang.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-orient: horizontal;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-orient: horizontal;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient: horizontal;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-orient: horizontal

box01
box02
box03

Thuộc tính box-orient với giá trị inline-axis

Thuộc tính box-orient với giá trị inline-axis: Định dạng thành phần theo trục nội tuyến.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-orient: inline-axis;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-orient: inline-axis;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient: inline-axis;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-orient: inline-axis

box01
box02
box03

Thuộc tính box-orient với giá trị vertical

Thuộc tính box-orient với giá trị vertical: Định dạng thành phần từ trên xuống dưới theo chiều dọc.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-orient: vertical;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-orient: vertical;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient: vertical;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-orient: vertical

box01
box02
box03

Thuộc tính box-pack với giá trị center

Thuộc tính box-pack với giá trị center: Đối với box hướng bình thường cạnh trái của thành phần được được chia đều cho cả hai phía.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-pack: center;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack: center;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack: center;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-pack: center

box01
box02
box03

Thuộc tính box-pack với giá trị end

Thuộc tính box-pack với giá trị end: Đối với box hướng bình thường cạnh phải của thành phần được đặc mép bên phải, ngược lại cạnh trái của thành phần sẽ được đặt mép bên trái.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-pack: end;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack: end;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack: end;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-pack: end

box01
box02
box03

Thuộc tính box-pack với giá trị justify

Thuộc tính box-pack với giá trị justify: Không gian mở rộng sẽ được chia đều giữa các thành phần.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-pack: justify;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack: justify;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack: justify;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-pack: justify

box01
box02
box03

Xem bằng trình duyệt Opera để hiểu rõ hơn.

Thuộc tính box-pack với giá trị start

Thuộc tính box-pack với giá trị start: Đối với box hướng bình thường cạnh trái của thành phần được đặc mép bên trái, ngược lại cạnh phải của thành phần sẽ được đặt mép bên phải.

CSS viết:

div {
    border: 1px solid #cc0000;
    height: 150px;
    width: 100%;
    display: box;
    box-pack: start;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack: start;
    
    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-pack: start;
}

div.blue { background: #0000ff; }
div.red { background: #ff0000; }
div.yellow { background: #ffff00; }

Hiển thị trình duyệt khi có box-pack: start

box01
box02
box03

box-sizing