Question

如何将类“ .content”的内容移动到其父类“ .primary”的中心？我确实尝试设置了“ width：10px”，但是它什么也没做。我只想让父类“ .primary”的孩子“ div”以特定宽度移动到其中心。现在，它们散布在其父宽度上；

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
}

.content {
  flex-grow:1;
  border:1px solid blue;
  width:10px;
}

<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

Answer 1

要对齐弹性容器中的项目，应使用justify-content。就是说，将flex-grow设置为1时，您的项目将忽略您的宽度设置，并增长以填充父项。下面是一个宽度为10px并与中心对齐的示例

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
}

.content {
  border:1px solid blue;
  width:10px;
}

<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

Answer 2

在这里，我通过应用div调整了内容flex-basis: 20%;的宽度，并从flex-grow:1;类中删除了.content。原因是flex-grow:1;将元素的宽度增加到其父元素的全角。并为justify-content: center;类添加.primary，使.content框居中对齐。

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
}

.content {
  /*flex-grow:1;*/
  flex-basis: 20%;
  border:1px solid blue;
  width:10px;
}

<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

弯曲方向行，其内容居中

2 个答案: