弹性项目之间的空间

Question

I'm currently trying to learn flex box but my knowledge isn't good enough for me to know what to search on Google or Stack.

I want the first element, 'stock' to be left aligned to the flex container and the last social media icon to be right aligned.

I need space between the stock list and the first social media icon, and then a little bit of space between each social icon.

 .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

I got rid of flex-grow on .stock because that letting it grow to fit the rest of the space which is exactly what you don't want, then target the social media divs and add margin to space them out. (Or you can add another container around the icons and flex those out space between). And then I add a width to the stock, 40% as example. Can make this width as flex-basis as others are saying.

 .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

Here is my solution for your problem

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

I have added the flex-basis to a static 30% and removed the dynamic flex-grow . Since the flex-grow is set to 1 in your case the width of your .stock will increase relative to the width of the screen.

Finally added spacing for the social icons.

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

Demo

Answer 3

Something like this:

 .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

As everyone mentioned the issue is with your flex-grow, and i wouldn't suggest to remove that attribute but instead to understand better about flexbox, please refer to this Flex-grow . Adding flex grow will resize all the div items.

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

Answer 5

You can find the solution in this 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>