Skip to content

Latest commit

 

History

History
92 lines (83 loc) · 3.11 KB

3.2.7 flex布局当overflow时无法滑动到顶部.md

File metadata and controls

92 lines (83 loc) · 3.11 KB

flex布局当overflow时无法滑动到顶部

<style type="text/css">
    .fix {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 320px;
      height: 640px;
      transform: translate(-50%,-50%);
    }
    .flex {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      justify-content: center;
      height: 100%;
      overflow-y: auto;
      position: relative;
    }
    img {
      width: 100%;
    }
  </style>
<div class="fix">
   <div class="flex">
     <img src="https://pic01-10001430.image.myqcloud.com/a7ee5bff-d4a7-4901-96a4-3652814f27d4">
   </div>
 </div>

Flexbox的对齐是一种“真正”意义上的居中， 这一点和我们使用的其他的CSS居中技术不太一样。
也就是说，即便当子元素超过父元素的边界时，他们在父元素中仍然是居中存在的。
然而这有时候会带来问题，当他们的top超过父元素的top边界，或者其left超过父元素的left边界时（当高度限定，宽度自动延伸时，
left就有可能超过父元素的left边界)，其超过top的部分（或left部分），虽然确实有内容在哪里，实际上却是无法scroll过去的。

在将来的版本中，flex的对齐属性会加入一个“安全”的选项（使得在这种情境下，top部分不至于被吞没）。
目前，如果这对您是一个担忧的话，您可以通过子元素的auto margins来达到这种安全的布局。
当子元素超过父元素时，他们会使用margin属性，而忽略居中属性。
不同于 justify- 的系列属性，
通过在flex父容器中的第一个和最后一个元素上面设置margin:auto(如果整个容器内只有一个元素，比如本例，则直接设置在该子元素上面)，
当有足够的空间给子元素来进行”flex”布局时，flex的布局会生效；
否则就会切换到一般的布局方式，也就是 margin:auto。

  • 修改后 demo:
<style type="text/css">
    .fix {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 320px;
      height: 640px;
      transform: translate(-50%,-50%);
    }
    .flex {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      justify-content: center;
      height: 100%;
      overflow-y: auto;
      position: relative;
    }
    img {
      display: block;
      width: 100%;
      margin: auto;
    }
  </style>

参考