Flex垂直对齐问题

Question

我有一排内联块元素，如果不适合，它会在新行上很好地包装：

＆＃13;

＆＃13;

.buttons div {
  display: inline-block;
  padding: 0.3em;
  margin: 0.3em;
  border: 1px dotted red;
}

＆＃13;

  <div class="buttons">
    <div>Some text here</div>
    <div><span></span>Some text here</div>
    <div>Some text here</div>
    <div><span></span>Some text here</div>
    <div>Some text here</div>
    <div><span></span>Some text here</div>
    <div>Some text here</div>
    <div><span></span>Some text here</div>
    <div>Some text here</div>
    <div><span></span>Some text here</div>    
  </div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle link #1

现在我将布局更改为flex：

＆＃13;

＆＃13;

.buttons div {
  display: inline-flex;
  padding: 0.3em;
  margin: 0.3em;
  border: 1px dotted red;
}

＆＃13;

＆＃13;

＆＃13;

元素不再垂直对齐：

JSFiddle link #2

如何将上面HTML代码段中显示的div元素行显示在我的第一张图片上，但是使用flex？

Answer 1

display：flex实际上应该是容器的属性，而不是flexbox中的项目。您还需要设置一些其他属性以获得与原始属性相同的行为。

.buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

// Remove display property from .buttons div

More info

Answer 2

这应该有所帮助 http://codepen.io/flurrd/pen/dvwpPp

 <div class="btn-group">
    <div class="btn">Some text here</div>
    <div class="btn"><span></span>Some text here</div>
    <div class="btn">Some text here</div>
    <div class="btn"><span></span>Some text here</div>
    <div class="btn">Some text here</div>
    <div class="btn"><span></span>Some text here</div>
    <div class="btn">Some text here</div>
    <div class="btn"><span></span>Some text here</div>
    <div class="btn">Some text here</div>
    <div class="btn"><span></span>Some text here</div> 
</div>

.btn-group {
  display: flex;
  flex-wrap: wrap;
}
.btn {
  padding: 0.3em;
  margin: 0.3em; 
  border: 1px dotted red;
  display: inline-block;
}

Answer 3

在带有display: inline-flex的 flex格式设置上下文中，您需要重置vertical-align属性。将其添加到您的代码中：

.buttons div {
    vertical-align: top;
}

.buttons div {
  display: inline-flex;
  padding: 0.3em;
  margin: 0.3em;
  border: 1px dotted red;
  vertical-align: top;  /* NEW */
}

<div class="buttons">
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
</div>

vertical-align的默认值为baseline。因为您的某些Flex容器有一个匿名弹性项（文本），而其他人有一个匿名弹性项和一个span，这显然会生成两个父母的不同基线。通过将vertical-align值更改为top，middle，bottom或其他问题，问题应该得到解决。

或者，如果使用display: inline-flex不是必需的，则更好的解决方案是将display: flex与flex-wrap: wrap一起应用于主容器。

.buttons {
  display: flex;
  flex-wrap: wrap;
}

.buttons div {
  padding: 0.3em;
  margin: 0.3em;
  border: 1px dotted red;
}

<div class="buttons">
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
  <div>Some text here</div>
  <div><span></span>Some text here</div>
</div>

这将完全消除vertical-align问题。