内容简介:最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。布局:在使用 flex 之前,实现这种布局主要是利用 float 属性,使元素脱离文档流,同时因为要实现 1:1 的比例,要将子元素的 width 设为 50%。同时要记得在后面的元素添加 clear:both 属性。
最近使用 flex 布局来做各种居中真的带来了不少方便,现在来总结一下平时的普通布局是怎样使用 flex 布局来实现一样的效果。
一、左右 1:1 布局
布局:
<div class="container"> <div class="child">LEFT</div> <div class="child">RIGHT</div> </div> 复制代码
利用 float 属性
在使用 flex 之前,实现这种布局主要是利用 float 属性,使元素脱离文档流,同时因为要实现 1:1 的比例,要将子元素的 width 设为 50%。同时要记得在后面的元素添加 clear:both 属性。
.container { margin: 40px; height: 600px; } .child { width: 50%; height: 100%; float: left; box-sizing: border-box; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
利用 flex 布局
如果使用 flex 布局,要将容器(父元素)display 设为 flex,项目(子元素)设定 flex-basis 值为 50%就可以实现 1:1 布局了,这个属性和 width 作用差不多,主要是指定 flex 元素在主轴方向上的初始大小。
.container { margin: 40px; height: 600px; display: flex; flex-direction: row; } .child { height: 100%; flex-basis: 50%; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
二、左中右 1:1:1 布局
实现方法其实和上面差不多,都是使用 float 和 flex-basis 属性来指定比例为 33.3%来实现。
布局:
<div class="container"> <div class="child">LEFT</div> <div class="child">MIDDLE</div> <div class="child">RIGHT</div> </div> 复制代码
利用 float 属性
.container { margin: 40px; height: 600px; } .child { width: 33.3%; height: 100%; float: left; box-sizing: border-box; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
利用 flex 布局
.container { margin: 40px; height: 600px; display: flex; flex-direction: row; } .child { height: 100%; flex-basis: 33.3%; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
三、水平居中布局
布局:
<div class="container"> <div class="child">CHILD</div> </div> 复制代码
利用 margin
相信大部分人都知道对于块级子元素利用简单的 margin: 0 auto
就能实现了吧,这就不多介绍了。
.container { margin: 40px; height: 600px; } .child { height: 100%; width: 50%; margin: 0 auto; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
利用 flex 布局
主要起作用的属性是 justify-content,它定义了项目在主轴上的对齐方式,所以只需把它设为 center 就能实现了,前提是父元素的 flex-direction 属性为 row,不过默认就是 row。
.container { margin: 40px; height: 600px; display: flex; justify-content: center; } .child { height: 100%; width: 50%; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; text-align: center; font-size: 40px; color: rgba(255, 255, 255, 0.7); } 复制代码
四、垂直居中布局
布局:
<div class="container"> <div class="child">CHILD</div> </div> 复制代码
利用 line-height
对于垂直居中就没有水平居中这么好写了,我平时主要是设置 line-height 配合 inline-block 这种方法来实现的。
将父元素 line-height 设为其 height 的值,并且将子元素的 display 属性设为 inline-block,再利用 vertical-align 将自己定位在父元素垂直轴上中心就可实现了。但是要记得将子元素的 line-height 初始化(initial),因为 line-height 默认是继承父元素的值的。
.container { margin: 40px; height: 600px; border: rgb(65, 184, 131) 8px solid; line-height: 600px; text-align: center; } .child { display: inline-block; height: 50%; width: 80%; vertical-align: middle; line-height: initial; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; color: rgba(255, 255, 255, 0.7); font-size: 40px; } 复制代码
利用 flex 布局
如果使用 flex 就很简单了,要控制父元素的 align-items 属性即可,它主要定义项目(子元素)在交叉轴上如何对齐。
.container { margin: 40px; height: 600px; border: rgb(65, 184, 131) 8px solid; display: flex; justify-content: center; align-items: center; } .child { height: 50%; width: 80%; background-color: rgb(53, 73, 94); border: rgb(65, 184, 131) 8px solid; color: rgba(255, 255, 255, 0.7); font-size: 40px; text-align: center; } 复制代码
小结
flex布局对于做各种居中带来了不小方便,同时如今现代浏览器对其兼容性也不错了。最后推荐两篇干货文章。
以上所述就是小编给大家介绍的《使用 Flex 布局与其他普通布局的简单对比》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
- 四种方法实现──三栏布局(圣杯布局、双飞翼布局)
- 浅谈CSS三栏布局(包括双飞翼布局和圣杯布局)
- css经典布局——圣杯布局
- CSS布局基础——(三栏布局)
- Grid布局 - 一键布局尝试总结~
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。