css3提供的网页布局
弹性盒子模型（flex box）：
设置成弹性盒子
默认横着排放（div也是）
当子盒子给的宽度过大，总的子盒子宽度超过父级盒子，会自动适配，计算整个盒子父级的大小，均匀分配。
目前是横着排列的，横向会自动适配。但是纵向高不会
方向为列时，竖向就不会被撑破
元素反向排列：
子元素超出父容器是否换行
默认不换行
换行
父级对齐方式：
子元素在水平方向排列，就指的垂直居中
子元素在竖直方向排列，就指的水平居中
块在水平方向对齐margin设置成auto就可以。主要用在垂直方向上的居中
有这个属性垂直居中，去掉这个属性不生效
栅格布局——grid布局
四个四个为一行
百分比：
文章来源：https://www.toymoban.com/news/detail-575554.html
文章来源地址https://www.toymoban.com/news/detail-575554.html
到了这里，关于css3提供的网页布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术7（HTML5、CSS3、JavaScript ）CSS的定位机制——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端开发技术5.2（HTML5、CSS3、JavaScript ）CSS基础，decoration，selector，properties，Cascading——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
![[HTML]Web前端开发技术8（HTML5、CSS3、JavaScript ）CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
