彈性布局總結
阿新 • • 發佈：2018-04-10
意思 bubuko 500px brush lex box x-pack alt 對齊
彈性布局對於移動端頁面開發其實還是蠻重要的，今天來一些總結吧
Flexbox 為 display 屬性賦予了一個新的值（即 box 值）, flexbox的屬性有很多，記錄一些比較常用的屬性：
- 用於父元素的樣式：
display: box; 該屬性會將此元素及其直系子代加入彈性框模型中。（Flexbox 模型只適用於直系子代）box-orient:horizontal|vertical|inherit;該屬性定義父元素的子元素是如何排列的。box-pack:start|end|center|justify;設置沿box-orient軸的父元素中子元素的排列方式。因此，如果box-orient是水平方向，則父元素的子元素是水平的排列方式，反之亦然。（表示父容器裏面子容器的水平對齊方式--垂直排列時--定寬）box-align:start|end|center|baseline|stretch;基本上而言是box-pack的同級屬性。設置框的子代在框中的排列方式。如果方向是水平的，該屬性就會決定垂直排列，反之亦然。（表示父容器裏面子容器的垂直對齊方式--水平排列時--定高）
- 用於子元素的樣式：
- box－flex: 0 | 任意數字; 該屬性讓子容器針對父容器的寬度按一定規則進行劃分。
其中 box-pack屬性 目前有很多瀏覽器還是不支持的 。
首先頁面的布局 要看每個子元素的 長度和寬度啊 ，要了解 ，而且要理解一下 以上屬性的意思，要不然 ，就會出現，明明我設置了 這個屬性，但是怎麽還不出來的情況呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>
.parent { display:box; display:-webkit-box; //在父元素上設置了 display:box這個屬性，說明這個盒子是彈性盒子
// 一般默認情況下box-orient是水平排列的 ，如果不設置就默認這個 width:500px; height:300px; background-color: lightblue; margin:100px auto; } .child1 { background-color: red; box-flex:3; -webkit-box-flex:3; } .child2 { background-color: yellow; box-flex:1; -webkit-box-flex:1; } .child3 { background-color: pink; -webkit-box-flex:1; } </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body> </html>
因為一般情況下，默認是水平排列，而且子元素也沒有設置為固定寬度的，所以按照彈性布局的原理，
按照比例分配，如果其中有個子盒子是固定寬度的，剩余的按照比例分配，這個時候有個問題就是。
有的時候並不是按照代碼中的比例分配，原因是 需要在固定寬度的地方設置一個屬性就可以解決問題 ，
這個屬性是：box-sizing:border-box; 這個屬性很重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
display:box;
display:-webkit-box;
width:500px;
height:800px;
box-orient:vertical;
-webkit-box-orient:vertical; // 這個地方設置的是子元素是垂直方向上排列，
//意思就是說 ：子元素要瓜分 父元素在垂直方向上的高度 所以這個demo我們設置的
//子元素的份額 ，實際上是垂直方向上的 份額
background-color: lightblue;
margin:100px auto;
}
.child1 {
background-color: red;
box-flex:3;
-webkit-box-flex:3;
}
.child2 {
background-color: yellow;
box-flex:1;
-webkit-box-flex:1;
}
.child3 {
background-color: pink;
-webkit-box-flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
display:box;
display:-webkit-box;
width:500px;
height:800px;
box-align:center;
-webkit-box-align:center; // 子元素默認是水平排列的 ，
//應用這個屬性，意思是想讓子元素在垂直方向上 居中，
//那麽問題來了？ 如果子元素沒有設置高度的話，是看不出來的，
//這個時候可以在子元素裏面加一些文字，或者給子元素加上高度，就能很清楚看到效果
background-color: lightblue;
margin:100px auto;
}
.child1 {
background-color: red;
box-flex:3;
-webkit-box-flex:3; //第一個盒子沒有固定高度 ，但是裏面有問題，否則只能在控制臺裏面查看
}
.child2 {
background-color: yellow;
box-flex:1;
-webkit-box-flex:1;
height:200px; //固定高度了，否則無法查看
}
.child3 {
background-color: pink;
-webkit-box-flex:1;
height:300px; //固定高度了，否則無法查看
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">123</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
display:box;
display:-webkit-box;
width:500px;
height:800px;
box-align:stretch;
-webkit-box-align:stretch; //拉伸屬性，這個時候 子元素 不能設置為固定高度了，如果設置了，就拉伸不了了。
background-color: lightblue;
margin:100px auto;
}
.child1 {
background-color: red;
box-flex:3;
-webkit-box-flex:3;
height:100px; //因為這個地方固定了高度了，所以拉伸不了了 ，這裏的高度就是100px了。
}
.child2 {
background-color: yellow;
box-flex:1;
-webkit-box-flex:1;
}
.child3 {
background-color: pink;
-webkit-box-flex:1;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">123</div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
彈性布局總結