灵活响应

Question

我正在使用 flex 将我的元素居中并定位在我的图层上，但是当切换到小屏幕尺寸时，当我使用 <col-md-4> 时，当屏幕变小时，元素会在引导时变小width ，当用户切换到小屏幕尺寸时，我想做类似的事情（我没有使用引导程序，因为它很难将<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>

检查此jsFiddlescale 正面和背面以查看对齐方式的变化。