我正在使用 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;
}
最佳答案
您可以同时使用 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 缩放
前后对齐以查看对齐方式的变化。
关于javascript - 灵活响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44588716/