html - 在 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

给 .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>