html - 如何通过垂直居中保持第一行中的 3 个固定宽度项目和下一行中的 2 个固定宽度项目

Question

.content{
  border:1px solid gray;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.item{
  background-color: green;
  width: 50px;
  max-width: 50px;
  text-align: center;
}

.item.second{
  margin:0 34.7%;
}

.item.fourth{
  margin-left: calc(100%-50px) /*not works */
}

.item.fifth{
  margin-right: calc(100%-50px) /*not works */
}

<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

我想保留顶行的 3 个项目以及底行的 2 个项目。顶行是space-between正确的。如何保持第二排space-around？这都是固定宽度。

这里现场演示：

预期结果：

标签： htmlcssflexbox

Answer 1

尝试这个

.item{
   width: calc(33% - 10%); /* margin left and right*/
   max-width: calc(33% - 10%); /* margin left and right*/
   margin:5%;
}

并添加justify-content: center;到内容类。

.content{
  border:1px solid gray;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.item{
  background-color: green;
  width: calc(33% - 10%); /* margin left and right*/
  max-width: calc(33% - 10%); /* margin left and right*/
  text-align: center;
  text-align: center;
  flex-grow: 3;
  flex-shrink: 0;
  margin:5%;
}

<div class="content">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>