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

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

给.flex-container一个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>

Answer 2

对于懒惰的修复，您可以执行以下操作：

  <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%;
}

我发现，当您调整图像大小时，它仍然保持其宽度，因此这就是在右侧留有空间的原因。