双栏布局

定宽栏 + 自适应栏

margin 方式

  1. <div class="container">
  2.     <div class="left">
  3.         左边
  4.     </div>
  5.     <div class="right">
  6.         右边
  7.     </div>
  8. </div>
  12. html{
  13.     height: 100%;
  14.     background: #f2f2f2;
  15. }
  16. .container{
  17.     /* display: flex; */
  18.     position: relative;
  19. }
  21. .left{
  22.     border: 1px solid black;
  23.     width: 200px;
  24.     height: 100%;
  25.     position: fixed;
  26.     top: 0;
  27.     left: 0;
  28.     bottom: 0;
  29.     overflow: hidden;
  30. }
  32. .right{
  33.     border: 1px solid black;
  34.     width: 200px;
  35.     margin-left: 200px;
  36. }

flex 方式

  1. <div class="container">
  2.     <div class="left">
  3.         左边
  4.     </div>
  5.     <div class="right">
  6.         右边
  7.     </div>
  8. </div>
  11. .container{
  12.     display: flex;
  13.     height: 100vh;
  14. }
  16. .left{
  17.     border: 1px solid black;
  18.     height: 100%;
  19.     width:200px;
  20. }
  22. .right{
  23.     border: 1px solid black;
  24.     flex: 1;
  25. }
  27. //注释
  28. 左边设置 flex: 0 0 200px 表示元素不缩小，不扩大，初始宽度为200px，即固定为200px。
  29. 右边设置 flex: 1 1 auto 表示元素按需缩小，扩大，基础宽度自适应，即宽度为总宽度减去200px，实现自适应。

注意
注意的是，flex容器的一个默认属性值: align-items: stretch;
这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

补充；flex 三个值解析

  1. .item {
  2.   flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配
  3.   flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配
  4.   flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走
  5. }
  7. flex-group: 指定容器剩余空间多余时的分配规则，默认是0（多余的空间不分配）
  8. flex-shrink：指定容器剩余空间不足时的分配规则，默认是1（空间不足时要分配）
  9. flex-basis：指定固定的分配数量，默认是auto