flex布局justify-content属性和align-items属性设置
前⾔：
flex最常⽤的就是justify-content和align-items了，这⾥把这两个属性介绍下，⼤家更多关于flex布局可以查看阮⼀峰的⽇志，写的⾮常清楚！
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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局justify-content属性</title>
<style rel="text/stylesheet">
.box {
display: -webkit-flex;
text align centerdisplay: 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>
View Code
3、flex的兼容性
　兼容性检测⽹址：
兼容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排列时
}
1. 就算下⾯再增加⼏个text，依然会⾃动垂直，⽔平居中
2. ⽐较直观，只需要在容器中设置，⼀⽬了然
3. ⾮常⾼效，灵活的应对页⾯结构的变化

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。