flex布局框架_CSS学习

资料来源：网络整理时间：2023/3/4 5:24:22 共计：3572 浏览

flex布局框架？

布局思路是这样的：

1、首先给header和footer一个固定的高度。

2、然后记得body的高度要设为100%，不然body是没有高度的。

3、body的布局设为flex，然后。

4、设置好了header和footer之后，我们就可以开始设计main部分的内容排列，因为body设置的排列是column，就是纵向排列，所以不能用align-items撑开main，只能在main里面设置flex: 1 1 auto将元素撑大，而且aside和article是有滚动条的：所以在main里面要设置隐藏浮动，不然会将屏幕撑到很大。

5、上面也可以看到main也是flex布局，所以aside和article成行排列，要使article撑满宽度，也要设置flex: 1 1 auto。最后再完善每块里面的细节布局。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：服务器端怎样处理来自客户端的404请求_CSS学习 | ·下一条：使用CHROME上一些网站时英文和数字概不显示如何解决_CSS学习