弹性盒布局
笔记+小案例
<style>
.zi{
height:100px;
width:100px;
background:purple;
margin:2px;
line-height:100px;
text-align: center;
color:#fff;
}
.fu{
height:400px;
width:600px;
margin:50px;
background:pink;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:space-around;
}
</style>
<body>
<div class="fu">
<div class="zi">一</div>
<div class="zi">二</div>
<div class="zi">三</div>
<div class="zi">四</div>
<div class="zi">五</div>
</div>
</body>
</html>
<script>
flex:1; //反正就是占满了,移动端适配的时候合适.
flex-direction row row-reverse column column-reverse
// 主轴方向 左向右 右向左 上向下 下向上
flex-wrap nowrap wrap wrap-reverse
// 换行不 不换 换 规定元素在必要的时候拆行或拆列，但是以相反的顺序
align-items center flex-start flex-end baseline
// 纵轴方向 中心 开头 下头 基线(没觉得有啥用)
justify-content flex-start flex-end center space-between space-around
// 主轴方向对齐方式 开头 结尾 中心 两边贴边儿 两边不贴边儿
align-content //同上
// 纵轴方向对齐方式
</script>
