javascript - 响应灵活

我正在使用flex将我的元素居中并放置在图层上，但是当切换到较小的屏幕尺寸时，当我使用<col-md-4>时，在引导程序中元素会变小，而当屏幕变小时，div会占据整个宽度，当用户切换到小屏幕尺寸时想做类似的事情（我没有使用引导程序，因为它确实很难将<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;
}

最佳答案

您可以按以下方式同时使用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 scale的正面和背面，以查看对齐方式的变化。

关于javascript - 响应灵活，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44588716/