javascript - 灵活响应

Question

我正在使用 flex 将我的元素居中并定位在我的图层上，但是当切换到小屏幕尺寸时，当我使用 <col-md-4> 时，元素在 Bootstrap 中变小了当屏幕变小时，div 占据整个宽度，当用户切换到小屏幕尺寸时，我想做类似的事情(我没有使用 bootstrap，因为它很难将 <col-md-3> 的 3 div 在页面中间居中

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

我的 CSS 是这样的

.container div {
  height:180px;
  width:180px;
  background-color:black;
  margin: 15px 15px;
}

Answer 1

您可以同时使用 flex 和 media query，如下所示，在特定屏幕分辨率下将它们居中对齐，

.container {
  display: flex;
  justify-content: center;
}

.container div {
  height: 180px;
  width: 180px;
  background-color: black;
  margin: 15px 15px;
}

@media screen and (max-width:320px) {
  .container {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

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

检查这个jsFiddle 缩放前后对齐以查看对齐方式的变化。