如何在使用flex-box垂直对齐时显示两个div内联？

Question

我在另一个div容器里有两个div。我用柔性盒将它们垂直地放在容器内，但我希望它们水平地相邻，而不是一个在另一个上面。我尝试了几种不同的方法，包括将容器的display属性从flex更改为inline-flex，以及将display:inline-block添加到子div。这是我正在工作的一张照片。如您所见，2 div (图片和组1标签)以父div为中心，但我希望group 1位于图片的旁边，而不是在它下面。

​

​

下面的代码和链接到JSfiddle

HTML

<div class="user-group">
<div>
 Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>

JS

.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
    display: inline-flex;
}

Answer 1

这取决于您是否打算在元素中有多个图片+文本对。如果不这样做，只需使用align-items: center就可以解决问题。您的代码有一些问题：

• align-content不是flex属性
• 避免使用display: inline-flex，您的情况不需要它
• 浮标和挠曲是相互冲突的布局方法。选择一个-在这种情况下，我们满足于弹性。
• 使用默认的flex方向，即row (如果未声明，它默认为row，因此我们只需删除该属性)

​

.user-group {
  font-family: 'Purista';
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 200px;
}
h4 {
  margin: 0;
}

<div class="user-group">
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
  </div>
  <div class="user-group-name">
    <h4>Group 1</h4></div>
</div>

​

另一方面，，如果您有多个图片+文本对，您将不得不求助于嵌套。每对都必须由额外的<div>包装。

​

.user-group {
  font-family: 'Purista';
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  height: 200px;
}
.user-group > div {
  display: flex;
  margin-bottom: 10px;
  }
h4 {
  margin: 0;
}

<div class="user-group">
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 1</h4></div>
  </div>
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 2</h4></div>
  </div>
  <div>
    <img src="https://placehold.it/32x32" alt="" title="" />
    <div class="user-group-name"><h4>Group 3</h4></div>
  </div>
</div>

​