Css hộp webkit

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

viết CSS

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; }

Show the browser when have box-align. bắt đầu

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

viết CSS

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; }

Show the browser when have box-align. chấm dứt

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

viết CSS

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; }

Show the browser when have box-align. trung tâm

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

viết CSS

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; }

Show the browser when have box-align. đường cơ sở

Thuộc tính box-align với giá trị kéo dài. Thành phần sẽ được mở rộng để phù hợp với thành phần bao bên ngoài

viết CSS

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; }

Show the browser when have box-align. căng ra

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

viết CSS

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; }

Show the browser when have box-direction. thông thường

Thuộc tính box-direction with reverse value. Hiển thị thành phần từ dưới lên trên hoặc từ phải sang trái

viết CSS

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; }

Show the browser when have box-direction. đảo ngược

Ta thấy tất cả vị trí của các 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. dọc, viết CSS

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

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

Show the browser when have box-direction. đảo ngược

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

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

viết CSS

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

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

Show the browser when have box-flex

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

viết CSS

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

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

Show the browser when have box-ordinal-group

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 block-axis value. Định dạng thành phần dọc theo khối lệnh

viết CSS

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

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

Show the browser when have box-orient. trục khối

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

viết CSS

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

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

Show the browser when have box-orient. nằm ngang

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

viết CSS

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

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

Show the browser when have box-orient. trục nội tuyến

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

viết CSS

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

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

Show the browser when have box-orient. thẳng đứng

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

Hộp WebKit trong CSS là gì?

Căn chỉnh hộp WebKit là gì?

WebKit trong CSS w3schools là gì?

Hộp Orient trong CSS là gì?