display: flex的个人理解

前言

当CSS2流行的时候,最常用的页面布局方式就是DIV+CSS,其中CSS里面的floatposition:relativeposition:absolute成为那个时代布局常用的方式。

但缺点也是很明显,比如float的浮动消除就要埋坑,position虽然好用,但是对于自适应PC、手机一下就显得力不从心。

一直疲于在解决浏览器兼容和多端显示不一致的时候,出现了Bootstrap他的栅格系统确实好用。随之很长一段时间都没有再找寻布局的新实现方式。直到看到CSS3里面的flex,基本上解决了平面领域所有的布局方式了。

什么是flex?

Flex是Flexible Box的缩写,意为”弹性布局”,也就是说这种布局方式可以让HTML的盒模型有更多布局方式。

弹性布局可以做什么?

基本上目前所有的网页布局都可以由弹性盒模型来实现。
这里介绍几个手机上常用的布局方式
上中下
image.png
这种布局需要考虑中部要根据窗口的高度自适应,如果用传统方式,需要将底部固定在最下面,或者需要JS的运算介入;而现在只需要给中部加上一个自动增大的属性就可以实现这个效果。

<body>
  <header>上</header>
  <main>中</main>
  <footer>下</footer>
</body>
body{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 24px;
  color: white;
}
header{
  background-color: #2980b9;
  height: 56px;
}
main{
  background-color: #e74c3c;
  flex-grow: 1;
}
footer{
  background-color: #2c3e50;
  height: 100px;
}
阅读 62

推荐阅读