Flex垂直對齊問題

Question

我有一排內聯塊元素，如果不合適，它們可以很好地換行：

 .buttons div { display: inline-block; 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> 

JSFiddle鏈接＃1

現在，我將布局更改為可彎曲的：

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

而且元素不再垂直對齊：

JSFiddle鏈接2

如何使上面HTML片段中顯示的div元素行看起來像我的第一張圖片，但是帶有flex？

Answer 1

顯示：flex實際上應該是容器的屬性，而不是flexbox中的項目。 您還需要設置一些其他屬性以獲取與原始屬性相同的行為。

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

// Remove display property from .buttons div

更多信息

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容器只有一個匿名的flex項目 （文本），而另一些有匿名的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問題。