参见英文答案 >
How to center a flex container but left-align flex items1个
我在代码段显示时成功创建了一个响应式网格.
我在代码段显示时成功创建了一个响应式网格.
此刻,我看到盒子左边对齐了.
如何在不使用填充的情况下将容器放在页面的中心？
我尝试使用margin：auto但它没有用.
.container{
display:flex;
flex-wrap:wrap;
text-align:center;
margin:auto;
}
.Box{
width:100%;
max-width:30%;
border:1px solid red;
margin:5px;
}
@media only screen and ( max-width:768px ){
.Box{
width:100%;
max-width:40%;
border:1px solid red;
}
}
<section class="container">
<div class="Box">
<h1>This is the first Box</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Adipisci voluptates,aut totam eaque possimus molestiae atque odio vero optio porro magni,quis culpa ea. Perferendis,neque,enim. Rem,quia,quisquam.</p>
</div>
</section>
解决方法
使用justify-content：center;而不是保证金：auto;：
.container {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
}
.Box {
width: 100%;
max-width: 30%;
border: 1px solid red;
margin: 5px;
}
@media only screen and (max-width: 768px) {
.Box {
width: 100%;
max-width: 40%;
border: 1px solid red;
}
}
