css弹性布局总结

css静态页面搭建总结

弹性布局

弹性布局很方便，可以快速的搭建出想要的布局

1、header部分

效果图：

实现思路：

一个header部分html结构是使用一个版心里面两个div一个是logo另一个是nav导航，样式搭建好后，使用弹性布局，给版心加：display：flex；justify-content：space-between；两端对齐，刚好两个div占在版心左右两端，然后，如果想垂直居中的话再设置align-item：center；可以快速搭建出布局，不用使用浮动，不用使用margin去挤。

2、footer部分

效果图：

实现思路：

版心宽1200px，里面上下两个div，div里面分别有不同的内容，想要实现平均占满整个版心，并且每个内容两边都要有相同的间距，这个使用环绕对齐，justify：space-around；

弹性布局虽然很方便但是，他也是有缺点的，缺点是兼容问题