使用 Flex 布局与其他普通布局的简单对比

综合技术 2018-12-08 阅读原文

最近使用 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布局对于做各种居中带来了不小方便,同时如今现代浏览器对其兼容性也不错了。最后推荐两篇干货文章。

稀土掘金

责编内容by:稀土掘金阅读原文】。感谢您的支持!

您可能感兴趣的

avue v1.5.0 发布,快速构建 crud 和 form 等组件的解决方案... 1.5.0 说明:avue1.x版本已经趋向于稳定,将不再做新的功能增加,但会根据issuse继续持续维护和优化将更多的精力投放于avue2.0 课程视频更新 B站视频 1.Avue修仙系列之基础...
Cartographic Map Layout Designs Introduction: An important characteristic of maps is that they need to be both functional and aesthetically pleasing. ...
有关 Hybrid 开发模式实践总结 前言 随着公司业务不断发展,移动开发项目越来越多,项目任务时间紧,我们内部开发流程是以项目为导向,有别于一般公司对产品不断迭代的做法,但移动端开发人员资源有限,需要在不同项目之间做业务场景切换开发,就会经常出现项目完成时间 Delay。...
Just write. I got used to writing lengthytechnical articles over the last few years that I’d been finding it increasingly harder to...
Paypal Mobile Payments – from a Phonegap HTM... Has anybody had any success in setting up Paypal payments that will run within a Phonegap IOS app? Our brief is to all...