彈性項目之間的空間

Question

我目前正在嘗試學習flex box，但是我的知識不足以讓我知道在Google或Stack上搜索什么。

我希望第一個元素“ stock”與flex容器對齊， 最后一個社交媒體圖標向右對齊。

我需要在股票列表和第一個社交媒體圖標之間留出空間，然后在每個社交圖標之間留出一些空間。

 .flex-container { width: 100%; padding-left: 0; padding-right: 0; } #flex-items { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; background-color: orange; } .stock { margin-right: auto; background-color: #6dc993; display: flex; border: 2px solid blue; flex-grow: 1; } .stock > p { margin-left: 5%; display: flex; align-self: center; font-size: 20px; color: white; height: 20%; } 

 <div class="flex-container"> <div id="flex-items"> <div class="stock"><p>Stock List</p></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> </div> </div> 

Answer 1

我擺脫了.stock上的flex-grow ，因為讓它增長到適合您不想要的其余空間，然后定位到社交媒體div並增加了空間來隔開它們。 （或者，您可以在圖標周圍添加另一個容器，並在圖標之間擴大空間）。 然后，我為股票添加寬度，例如40％。 可以像其他人所說的那樣靈活地設置此寬度。

 .flex-container { width: 100%; padding-left: 0; padding-right: 0; } #flex-items { display: flex; flex-direction: row; flex-wrap: nowrap; background-color: orange; } .stock { width: 40%; margin-right: auto; background-color: #6dc993; display: flex; border: 2px solid blue; } .stock>p { margin-left: 5%; display: flex; align-self: center; font-size: 20px; color: white; height: 20%; } #flex-items div:not(:first-of-type) { margin-left: 10px; } 

 <div class="flex-container"> <div id="flex-items"> <div class="stock"> <p>Stock List</p> </div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> </div> </div> 

Answer 2

這是我為您解決的問題

.stock {
   margin-right: auto;
   background-color: #6dc993;
   display: flex;
   border-right: 5px solid blue;
   flex-grow: 1; //removed
   flex-basis: 30%; //added
 }

我已將flex-basis添加到靜態30％，並刪除了動態flex-grow 。 由於您的情況下flex-grow設置為1 ，因此.stock的寬度將相對於屏幕的寬度增加。

最后為社交圖標添加了間距。

#flex-items div:not(:first-of-type) {
  margin-left: 10px;
}

演示版

Answer 3

像這樣：

 .flex-container { width: 100%; padding-left: 0; padding-right: 0; } #flex-items { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; background-color: orange; height: 75px; } .stock { margin-right: auto; background-color: #6dc993; display: flex; border: 2px solid blue; flex-grow: 1; width: 33%; } .links { width: 66%; display: flex; justify-content: flex-end; } .links > div > img { margin-left: 5px; } .stock > p { margin-left: 5%; display: flex; align-self: center; font-size: 20px; color: white; height: 20%; } 

 <div class="flex-container"> <div id="flex-items"> <div class="stock"><p>Stock List</p></div> <div class="links"> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> </div> </div> </div> 

Answer 4

正如所有人都提到的，問題出在您的flex-grow上，我不建議刪除該屬性，而是為了更好地了解flexbox，請參閱此Flex-grow 。 添加伸縮增長將調整所有div項目的大小。

flex-grow屬性指定彈性項目相對於其余彈性項目將增長多少。

Answer 5

您可以在此Codepen中找到解決方案

 .flex-container { width: 100%; padding-left: 0; padding-right: 0; } #flex-items { display: flex; justify-content: flex-start; background-color: orange; } .socialWrapper { display: flex; } .stock { margin-right: auto; background-color: #6dc993; display: flex; width: 40%; border: 2px solid blue; } .stock > p { margin-left: 5%; display: flex; align-self: center; font-size: 20px; color: white; height: 20%; } .icon-wrap { margin-left:5px; } .icon-wrap img { height: 100%; } 

 <div class="flex-container"> <div id="flex-items"> <div class="stock"><p>Stock List</p></div> <div class="socialWrapper"> <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> <div class="icon-wrap"><img title="Like us on Facebook" src="http://i.cubeupload.com/ULYeTe.jpg" alt="Like us on Facebook" width="68" height="76" /></div> </div> </div> </div>