时间戳

首页 > 解决方案 > Flex 方向行，其内容居中

html - Flex 方向行，其内容居中

问题描述

如何将类“.content”的内容移动到其父类“.primary”的中心？我确实尝试设置“宽度：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>

标签： htmlcssflexbox

解决方案

要对齐弹性容器中的项目，您应该使用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>

推荐阅读