display-flex的个人理解

41次阅读

共计 774 个字符，预计需要花费 2 分钟才能阅读完成。

当 CSS2 风行的时候，最罕用的页面布局形式就是 DIV+CSS，其中 CSS 外面的 float 和 position:relative、position:absolute 成为那个时代布局罕用的形式。

但毛病也是很显著，比方 float 的浮动打消就要埋坑，position尽管好用，然而对于自适应 PC、手机一下就显得力不从心。

始终疲于在解决浏览器兼容和多端显示不统一的时候，呈现了 Bootstrap 他的 栅格零碎 的确好用。随之很长一段时间都没有再找寻布局的新实现形式。直到看到 CSS3 外面的flex, 基本上解决了立体畛域所有的布局形式了。

Flex 是 Flexible Box 的缩写，意为”弹性布局”，也就是说这种布局形式能够让 HTML 的盒模型有更多布局形式。

基本上目前所有的网页布局都能够由 弹性盒模型 来实现。
这里介绍几个手机上罕用的布局形式
上中下

这种布局须要思考中部要依据窗口的高度自适应，如果用传统形式，须要将底部固定在最上面，或者须要 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;
}

正文完