Извлечь разрыв по умолчанию между элементами во flexbox

Question

При условии простого flexbox:

Я хочу выбросить пространство между img и зеленой областью .. Как я могу сделать это с моим кодом?

* {
  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

Для ленивого исправления вы можете сделать:

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

Будет больше играть с вашим кодом и постарается найти более элегантный способ его исправить.
Будет редактировать, если я что-нибудь найду.
РЕДАКТИРОВАТЬ:

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

Я обнаружил, что когда вы изменяете размер изображения, оно по-прежнему сохраняет свою ширину, поэтому справа есть место.

Answer 2

Дайте .flex-container a justify-content: space-evenly; или 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>