发出弹性框中项目之间的默认间隙

Question

Given a simple flexbox:

I want to emit the space between the img and the green area.. How can I do it with my code?

 * { box-sizing: border-box; } body { margin: 0; } .flex-container { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border: solid; width: 1028px; margin: 0 auto; /* put the container on the middle */ } .flex-container ul { padding-left: 0; /* avoud the default padding to the left */ background: green; } .flex-container ul li { display: inline-block; padding: 30px; } .flex-container img { vertical-align: middle; width: 45%; } 

 <div class="flex-container"> <div> <img src="https://i.imgur.com/cvO9xwB.png"> </div> <div> <ul> <li>Home</li> <li>About</li> <li>Shop</li> <li>Contact us</li> </ul> </div> </div> 

Answer 1

Give the .flex-container a justify-content: space-evenly; or justify-content: space-around;

 * { box-sizing: border-box; } body { margin: 0; } .flex-container { display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; border: solid; width: 1028px; margin: 0 auto; /* put the container on the middle */ } .flex-container .img-wrap{ width: 108px height: 110px } .flex-container ul { padding-left: 0; /* avoud the default padding to the left */ background: green; } .flex-container ul li { display: inline-block; padding: 30px; } .flex-container img { vertical-align: middle; width: 45%; } 

  <div class="flex-container"> <div class="img-wrap"> <img src="https://seeklogo.com/images/N/new-google-maps-icon-logo-263A01C734-seeklogo.com.png"> </div> <div> <ul> <li>Home</li> <li>About</li> <li>Shop</li> <li>Contact us</li> </ul> </div> </div> 

Answer 2

For a lazy fix you can do:

  <div style="margin-right: -132px">
    <img src="https://i.imgur.com/cvO9xwB.png">
  </div>

Will play more with your code and will try to find a more elegant way of fixing it.
Will edit if I find anything.
EDIT:

.flex-container img {
  vertical-align: middle;
  float: right; /*This fixes the image*/
  width: 45%;
}

I found out that when you resized the image it still keeps its width so this is why there is the space on the right.