flex实现简单布局

flex实现简单布局

1.利用flex实现如图布局；

首先是div部分

<div class="head">
      <div class="header" style="background-color: red;"></div>
      <div class="left" style="background-color: bisque;"></div>
      <div class="content" style="background-color: blue;"></div>
      <div class="right" style="background-color: aqua;"></div>
</div>

下面是css实现部分

.head {
  display: flex; /* //弹性布局 */
  flex-flow: row wrap; /* 横向排列 允许换行 */
  height: 100%;
}
.header {
  width: 100%;
  height: 50px;
}
.left {
  width: 100px;
  height: calc(100vh - 50px); /* 在css中，运算符前后要加空格！！！ */
}
.right {
  width: 100px;
  height: calc(100vh - 50px);
  top: 50px;
}
.content {
  height: calc(100vh - 50px);
  flex: 1;
}

以上主要是实现简单的flex三栏布局；

注意

我在写高度撑满视图的时候，发现在vue中使用height:100%没起作用；如图

显示效果，还不知道为什么不展示高度，有知道原因的可以评论哦！

而在菜鸟编辑器中.container 中 height:100%是可以撑满高度的；