发布日期: 2022-05-17 11:56:31 浏览次数: 60438
传统布局的解决方式,是基于盒子模型,依赖 display,position,float 等属性。它对于那些特殊布局非常不方便。
就比如,垂直居中就不容易实现。我们可能要 position + transform 才能配合完成。
新的方案flex布局,可以简便、完整、响应式地实现各种页面布局。
使用了flex布局的盒子模型设置垂直居中就非常简单了,只需要设置 align-items:center; 属性。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
方法一
| 左侧 float:left,右侧 margin-left。
方法二
| 左侧 float:left,右侧 overflow:hidden。
方法三
| 利用定位 position
方法四
| 利用弹性布局 flex
联系我们
13932058117(系统开发)
地址:邯郸市友谊时代广场B座21层
邮箱:jsb@hbcg.cc