为什么要使用flex布局?

发布日期: 2022-05-17 11:56:31    浏览次数: 572    

       传统布局的解决方式,是基于盒子模型,依赖 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