主页 / 问题 / 994647
Accepted
humster_spb
Asked:2020-06-20 13:40:55 +0000 UTC2020-06-20 13:40:55 +0000 UTC

Flexbox：在小屏幕上居中对齐作物内容

  • 772

有一个模态窗口（display: flex），其内容与屏幕中心对齐（justify-content: center; align-items: center）。在大屏幕上，一切看起来和工作正常。但在比内容更小的移动设备上，内容在顶部和底部被裁剪。特别是“关闭窗口”按钮不可用。

1、为什么不出现滚动条？是什么解释了 flexbox 的这种行为？

2.是否可以在flex的框架内解决这个问题？或者您是否必须在不使用 flex 的情况下以不同的方式对齐内容？

$('.open-btn').click(function(){
  $('.modal-window').css('display','flex');
})
$('.close-btn').click(function(){
  $('.modal-window').css('display','none');
})
.modal-window {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1cacf3;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-content {
  width: 200px;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
}
.modal-content .close-btn {
  cursor: pointer;
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-btn">Открыть окно</button>
<div class="modal-window">
  <div class="modal-content">
      <p class="close-btn">Закрыть</p>
      <h1>Заголовок модального окна</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

html

3 个回答

  1. Best Answer

    justify-content不是通过and对齐align-items，而是margin: autofor .modal-content。那么，overflow: auto对于.modal-window

    $('.open-btn').click(function(){
  $('.modal-window').css('display','flex');
})
$('.close-btn').click(function(){
  $('.modal-window').css('display','none');
})
    .modal-window {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1cacf3;
  z-index: 2;
  display: none;
  overflow: auto;
}
.modal-content {
  width: 200px;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  margin: auto;
}
.modal-content .close-btn {
  cursor: pointer;
  float: right;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-btn">Открыть окно</button>
<div class="modal-window">
  <div class="modal-content">
      <p class="close-btn">Закрыть</p>
      <h1>Заголовок модального окна</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

    • 4

  2. 是的，您被正确地建议与 margin: auto; 对齐。要修复窗口高度拉伸时 IE 中的错误，请使用 align-self: center 模式窗口；

    • 1 

  3.   @media screen and (max-width: 200px) {
  .modal-content {
    overflow: scroll;
  }

    尝试在您的代码中添加媒体查询 在此处输入图像描述

    • -1

相关问题