为啥要有flex布局？
一个原因是传统实现元素居中太艰难，绕的路太多。
举个例子
<style>
#son1 {
width:100px;
height:100px;
background:pink ;
}
#son2 {
width:100px;
height:100px;
background:green ;
}
</style>
<div id="dad">
<div id="son1">son1</div>
<div id="son2">son2</div>
</div>
结果是
image.png
justify-content用于对齐元素
在上述代码添加
#dad {
display:flex;
justify-content:flex-start;
}
结果就是左对齐
image.png
justify-content:这个center就是居中对齐
flex-end就是右对齐。
还有个space-around 就是元素均匀分布
image.png
space-between两端挨着边缘了
image.png
align-items
试想这么一种情况
如何可以按照下面的线对齐？
image.png
这么设置dad的style
#dad {
display:flex;
align-items:center
}
结果是
image.png
若是
#dad {
display:flex;
align-items:flex-start;
}
结果是
image.png
#dad {
display:flex;
align-items:flex-end;
}
结果是
image.png
再比如
#dad {
display:flex;
justify-content:center;
align-items: center;
}
结果
image.png
总结
justify-content 属性用于定义如何沿着主轴方向排列子容器。
align-items 属性用于定义如何沿着交叉轴（纵轴）方向分配子容器的间距。类似上对齐，下对齐，
so easy！
