flex布局justify-content屬性和align-items屬性設置
前言：
flex最常用的就是justify-content和align-items了，這裏把這兩個屬性介紹下，大家更多關於flex布局可以查看阮一峰的日誌，寫的非常清楚！
阮一峰flex布局的日誌：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
1、justify-content（在父元素設置）
設置彈性盒子元素在主軸（橫軸）的對齊方式。
取值：
- justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start: 彈性盒子元素將向行起始位置對齊。第一個元素與左起始邊界對齊，後面的元素接著第一個元素進行排列。
flex-end: 彈性盒子元素將向行結束位置對齊。整體靠著行結束的位置排列。
center：整體居中顯示。
space-between: 彈性盒子元素均勻分布。第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
space-around: 彈性盒子元素均勻分布。兩端保留子元素與子元素之間間距大小的一半。
2、align-items, align-self
設置彈性盒子元素在垂直方向上（縱軸）的對齊方式。其中align-items屬性用於彈性容器，而align-self用於彈性項目。
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"View Code> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局justify-content屬性</title> <style rel="text/stylesheet"> .box { display: -webkit-flex; display: flex; width: 400px; height: 100px; margin: 0; padding: 0; border-radius: 5px; list-style: none; background-color: #eee; } .box li { margin: 5px; padding: 10px; border-radius: 5px; background: #aaa; text-align: center; } #box { -webkit-justify-content: flex-start; justify-content: flex-start; } #box2 { -webkit-justify-content: flex-end; justify-content: flex-end; } #box3 { -webkit-justify-content: center; justify-content: center; } #box4 { -webkit-justify-content: space-between; justify-content: space-between; } #box5 { -webkit-justify-content: space-around; justify-content: space-around; } </style> </head> <body> <h2>justify-content: flex-start</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: flex-end</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: center</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: space-between</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: space-around</h2> <ul id="box5" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>
3、flex的兼容性
兼容性檢測網址：www.caniuse.com
- 兼容IE10以上，但是要加前綴 -ms-
- Edge全部支持
- firfox 版本28以上，低版本要加 -moz-
- chrome 21以上，低版本要加 -webkit-
微信小程序中經常使用flex布局非常方便：
彈性盒子布局：
1、 首先找到使用彈性盒子布局的容器元素view,首先將他變成一個flex
a) display:flex; //設置完後默認的每個元素都是從左往右放置的
b) 目標一：每個元素獨占一行，自上而下放置
flex-direction: column;
c) 目標二：自上而下放置時在垂直方向上均勻分布；元素在垂直方向上間隔一致，而且第一個和最後一個元素離頂部和底部都有一定的間距；
justify-content: space-around;
d) 目標三：元素在水平方向上居中
align-items: center;
彈性盒子布局優點：
.container {
background-color: #eee;
height: 100vh;
// 下面是彈性盒子布局
display: flex;
flex-direction: column; // 縱向排列
justify-content: space-around;
align-items: center;
// flex-wrap: wrap; // 一行顯示不了可以換行,用於pc端多個item排列時
}
- 就算下面再增加幾個text，依然會自動垂直，水平居中
- 比較直觀，只需要在容器中設置，一目了然
- 非常高效，靈活的應對頁面結構的變化
flex布局justify-content屬性和align-items屬性設置