flex常用样式布局的实践总结

目录

• 前言
• 2栏布局: 左栏固定宽度，右栏占剩余
• 3栏布局: 2翼左右固定宽度，中间占剩余
• 顶部固定位置，内容采用3栏布局: 2翼左右固定宽度，中间占剩余
• 垂直3等分:顶部，中间内容，底部footer，中间内容3栏布局

内容

前言

我们可能看过基本样式的书籍，时不时去阅读一些博文，但真正遇到问题时还是不能一下顺利的实现所期望的部署，总结下原因，估计还是因为缺少整理和实践。接下来我将整体去总结一些比较常用的布局实践，提炼实现核心，说明实现原理。

2栏布局: 左栏固定宽度，右栏占剩余

效果:

代码:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 200px;
}
.right {
  flex-grow: 1;
}

分析:

• 容器布局: flex，即采用弹性布局
• justify-content: space-between; 即容器子元素占满分布
• 固定左翼的宽度为200px
• 右翼元素设置flex-grow:1，即占满剩余的空间

3栏布局: 2翼左右固定宽度，中间占剩余

效果:

代码:

<div class="container">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left, .right {
  width: 200px;
}
.middle {
  flex-grow: 1;
}

分析:

• 容器布局: flex，即采用弹性布局
• justify-content: space-between; 即容器子元素占满分布
• 固定左右两翼的宽度为200px
• 中间子元素设置flex-grow:1，即占满剩余的空间

顶部固定位置，内容采用3栏布局: 2翼左右固定宽度，中间占剩余

效果:

代码:
基于三栏布局基础上补充

<div class="menu">menu</div>
<div class="container">
     <div class="left">
        <div class="title">title</div>
        <div class="rest">rest</div>
      </div>
      <div class="right">right</div>
</div>

.menu {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: azure;
}
.container {
  padding-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
...
//省略重复

分析:

• 菜单顶部固定 fixed，滚动时一直固定顶部。
• 内容顶部留足padding，保证不与菜单重合。

垂直3等分:顶部，中间内容，底部footer，中间内容3栏布局

效果:

代码:

<div class="container">
      <div class="top">top</div>
      <div class="content">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
      </div>
      <div class="footer">footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container > .top,
.container > .footer {
  height: 50px;
  background-color: azure;
}
.container > .content {
  flex-grow: 1;
  background-color: beige;
  display: flex;
  justify-content: space-between;
}

.container > .content > .left,
.container > .content > .right {
  width: 80px;
  background-color: burlywood;
}
.container > .content > .middle {
  flex-grow: 1;
}

分析:

• 先flex-direction：column, 纵向Flex布个局；
• 再flex-direction：row, 纵向Flex布个局；