在每行中居中 3 个 div答案

【问题标题】：Centering 3 divs in each row在每行中居中 3 个 div
【发布时间】：2021-12-26 03:27:08
【问题描述】：

我试图将三个 div 连续居中，但由于某种原因，我在一行中只得到了 4 个 div，而另外两个 div 在另一行中，我做错了什么？

.container{
display: flex;                
justify-content: center; 
padding-top: 20px;
color:black;
padding-bottom: 30px;
flex-wrap: wrap;
align-items: center;

.box{
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 2px 5px #ccc;
    width:240px;
    margin: 16px;
    height: 300px;
    padding: 20px;
    float: left;
    text-align: center;
    
}


const Offer = (props) => {
  return (
    <div id="ser-id">

    <div className="box">
    <img className="icon" src={props.img} alt="" />
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    </div>
    </div>
  );
};

【问题讨论】：

您在.container 之后错过了}。那个.container的HTML在哪里？
如果你的意思是在一个.container div 中有 4 个.box div，那没有错。您使用 flex 并且每行的框数取决于浏览器的宽度。它从 4 到 1 不等。

标签： css reactjs flexbox

【解决方案1】：

使用flex-wrap: wrap，由于它们的设置和容器的宽度，一行中将有尽可能多的子元素（= 弹性项目）。因此，如果您连续获得四个而不是三个，则减少 flex 容器的 width 或添加一些侧边距（如果 box-sizing 不是 border-box）

你应该删除那个float: left;。在没有意义的 flexbox 上下文中。

【讨论】：

【解决方案2】：

您可以使用百分比进行拆分，然后将以下内容用于 .box 类：

.box{
    flex: 0 0 auto;
    width: 33.33333333%;
}

或者你给 .container 一个固定的宽度，它是只有 3 个盒子的总和，这样只有 3 个适合并将其他 3 个推到下一行。目前一个盒子设置为 240px，所以如果容器可以容纳 4 就可以了。

【讨论】：

第二种选择是在你的 reactjs 代码中添加一个计数器。您检查该计数器的值，并在每个第三个元素之后关闭容器，然后再次打开它。基本上不是一行有 6 个元素，而是有 2 行，每行 3 个元素。