Flex-box(Css)：挠曲盒项之间的距离

Question

我在跳蚤市场真的很新。我一直在用Saas玩挠性盒.我的目标是在像这样的软盒项目之间保持距离：

​

我不能那样做。我已经用码箱(PS )上传了我的代码。在我的代码框中，我使用了css)。如果有人帮我，我会很高兴的。

​

.social-media {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.social-media .logo {
  font-size: 25px;
}

.social-media .copyright {
  font-size: 10px;
}

.social-media .policy {
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.social-media .social-media-icon a {
  text-decoration: none;
}

.social-media .social-media-icon img {
  width: 20px;
  height: 20px;
}

<div class="social-media">
  <h1 class="logo"> logo </h1>
  <p class="copyright">&#169 copyright 2020 </p>
  <div class="policy">
    <p>cookie policy</p>
    <p>Terms of use</p>
    <p>Privacy notice</p>
  </div>
  <div class="social-media-icon">
    <a href="#">
      <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/uhx5mj72hj5l3swqlfrd.png" alt="facebook" />
    </a>
    <a href="#">
      <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/dfuq3nnxqcwwottyywcp.png" alt="linkedin" />
    </a>
    <a href="#">
      <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/o7bgzr2mknptyds9iygi.png" alt="instagram" />
    </a>
    <a href="#">
      <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/uqfvamm6pzhp5leubosh.png" alt="twitter" />
    </a>
  </div>
</div>

​

Answer 1

我试过复制那个巴布亚新几内亚的形象。我稍微改变了你的html。

​

body {
  background-color: pink;
}
.social-media {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f871;
}

.logo {
  font-size: 25px;
}

.copyright-wrapper {
  display: flex;
  align-items: center;
}
.copyright {
  font-size: 10px;
}

.policy {
  font-size: 10px;
  display: flex;
  align-items: center;
}

.policy p {
  margin: 0 4px;
}
.social-media-icon a {
  text-decoration: none;
  margin: 0 4px;
}
.social-media-icon img {
  width: 20px;
  height: 20px;
}

 <div class="social-media">
      <div class="copyright-wrapper">
        <p class="copyright">&#169 copyright 2020 </p>
        <h1 class="logo"> logo </h1>
      </div>
      
      <div class="policy">
        <p>cookie policy</p>
        <p>Terms of use</p>
        <p>Privacy notice</p>
      </div>
      <div class="social-media-icon">
        <a href="#">
          <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/uhx5mj72hj5l3swqlfrd.png" alt="facebook"/>
        </a>
        <a href="#">
          <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/dfuq3nnxqcwwottyywcp.png" alt="linkedin"/>
        </a>
        <a href="#">
          <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/o7bgzr2mknptyds9iygi.png" alt="instagram"/>
        </a>
        <a href="#">
          <img src="https://res.cloudinary.com/drewzxzgc/image/upload/v1597126697/uqfvamm6pzhp5leubosh.png" alt="twitter"/>
        </a>
      </div>
    </div>

​

Answer 2

.social-media {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f9f871;
  align-items: center;
}

Answer 3

你可以给：

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex:1;
}

这将解决你的问题