CSS Flex對齊項

Question

伙計們，我有三個圖標，我嘗試在左側顯示兩個項目，在右側顯示一個項目。 我需要哪種flex-properties？

 .flex-container_1 { display: flex; flex-wrap: wrap; flex-direction: row-reverse; align-text: right; height: 99%; align-items: flex-end; justify-content: space-between; } .flex-container_1>div { margin: 10px; z-index: 9999; } 

 <div class="flex-container_1"> <div id="brilleicon" style=" align-items: flex-start; background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat; background-size: 70% 70%; backgroundColor: black; opacity: 0.5; border: 0; bottom: 0; cursor: pointer; min-width: 50px; min-height: 30px; padding-right: 5%; padding-top: 4%; position: relative; right: 0; transition: background-color .05s ease; -webkit-transition: background-color .05s ease; z-index: 9999;"></div> <div id="pictureicon" class="clickable" style=" align-items: flex-start; background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat; background-size: 110% 90%; backgroundColor: black; opacity: 0.5; border: 0; bottom: 0; cursor: pointer; min-width: 70px; min-height: 30px; padding-right: 5%; padding-top: 4%; position: relative; right: 0; transition: background-color .05s ease; -webkit-transition: background-color .05s ease; z-index: 9999;"></div> <div id="videoicon" class="clickable" style=" align-items: flex-start; background: rgba(0, 0, 0, 0.35) url() 50% 50% no-repeat; background-size: 110% 90%; backgroundColor: black; opacity: 0.5; border: 0; bottom: 0; cursor: pointer; min-width: 70px; min-height: 30px; padding-right: 5%; padding-top: 4%; position: relative; right: 0; transition: background-color .05s ease; -webkit-transition: background-color .05s ease; z-index: 9999;"></div> </div> 

那就是我所擁有的。 它使我的項目從右到左對齊，它們之間留有間隔，但我希望中間的圖標在左邊的項目旁邊對齊

Answer 1

我建議使用兩個對象包裝器進行以下操作：（如果要使用row屬性加載Bootstrap或任何其他CSS框架，請​​將行更改為其他內容）

<div class="row">
   <div class="i-left">
      Your flex list for two icons
   </div>
   <div class"i-right">
      Your flex list for one icon
   </div>
 </div>

然后使用css將'row'標記為flex對象本身，然后使用相關屬性正確設置i-left和i-right類的位置。 您可以使用justify-content來執行此操作，然后使用align-items將它們在行中垂直對齊！

這是做事的最有效方法。 無需使flex復雜化。

旁注：如果您在google上建立索引，則切勿在html中使用太多內聯樣式。 他們會為您提供這樣的內聯樣式。

Answer 2

在這里，我編寫了一個小型演示項目，您可以參考：

https://codepen.io/sivcan/pen/KeBqGb

想法是將內容分為兩個塊，並為其提供justify-content: space-between