如何将列与网格对齐并将最后一行居中？

Question

如何实现以下布局：

我尝试使用flexbox，使用jusitfy-content: space-around;对内容进行验证。这几乎是有效的，除了第一行，每列都与容器对齐。

此外，这可能需要使用六个项目。在那个例子中，底行应该与顶行反映相同。

项目是动态生成的。

这一切都可能吗？我怎么做到这一点？

Answer 1

如果你提供代码，我可以更新这个，但是我在我的例子中这样做了。

工作示例 - https://codepen.io/anon/pen/dJodeZ

 .item {
    width: 350px;
    border-bottom: 1px solid black;
    padding: 10px 0px 50px 0px;
    margin-bottom: 50px;
    margin-left: 25px;
    display: inline-block;
}
.wrapper{
    text-align: center;
    justify-content: center;
    width: 95%;
    margin-top: 100px;
    margin-left: 2.5%;
}

Answer 2

您可以使用bootstrap。放置https://getbootstrap.com/docs/4.0/getting-started/introduction/的链接 在你的网站的头部。然后你可以将以下代码放在你的身体中：

<div>

这将实现您正在寻找的布局。在大屏幕上，前三个text-align:center;元素将占据屏幕的三分之一，最后两个元素将占据一半。

编辑 - 对div内的元素使用{{1}}。

Answer 3

我添加了一个按钮，您可以使用该按钮在弹性框中使用class "thing"生成更多框，并查看布局如何更改。希望能帮助到你。 ：）

$("button").click(function(){
  $(".things").append("<div class='thing'></div>");
});

.things {
  padding: 0;
  margin: 0;
  flex-flow:row wrap;
  display: flex;
  justify-content: space-around;
}

.thing {
  border:1px solid black;
  padding: 10px;
  margin:30px;
  flex:1 0 300px;
  min-width:300px;
  max-width:350px;
  height:300px;
  background:red;
  align-items:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>CLick me to make boxes!</button>

<div class="things">
  <div class="thing"></div>
  <div class="thing"></div>
</div>