css3中的display：-webkit-box的用法
css3中的display：-webkit-box的用法
webkit-box
1.之前要實現橫列的web佈局，通常就是float或者display:inline-block;但是都不能做到真正的流體佈局。至少width要自己去算百分比。
2.flexiblebox就可以實現真正意義上的流體佈局。只要給出相應屬性，瀏覽器會幫我們做額外的計算。
3.box-flex是css3新新增的盒子模型屬性，它的出現可以解決我們通過N多結構、css實現的佈局方式。經典的一個佈局應用就是佈局的垂直等高、水平均分、按比例劃分。
目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支援，但可以使用它們的私有屬性定義firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
提供的關於盒模型的幾個屬性
box-orient
子元素排列 vertical（豎排）orhorizontal（橫排）
box-flex
兄弟元素之間比例，僅作一個係數
box-align
box排列
box-direction
Box方向
box-flex-group
以組為單位的流體系數
box-lines
box-ordinal-group
以組為單位的子元素排列方向
-moz-box-pack:end;
-webkit-box-pack:end;
效果圖
box-pack以下是關於flexiblebox的幾個例項
1.1. 四列自適應的佈局。
效果圖
1.1html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3中webkit-box的用法</title>
</head>
<style>
.wrap {
display:-moz-box;
display:box;
display: -webkit-box;
-webkit-box-orient: horizontal;/* 橫排顯示*/
}
.child {
min-height: 200px;
border: 2px solid orangered;
-webkit-box-flex: 1; /* 一比一*/
margin: 20px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center; /* 居中顯示*/
}
</style>
<body>
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
轉載於：https://blog.csdn.net/csdn_chenli/article/details/52946143