弹性框Css：弹性框项目之间的距离

问题描述

我真的是flex-box的新手。我一直在使用Saas来玩flex-box。我的目标是保持这样的弹性框项目之间的距离：

我无法做到这一点。我已经在Codesandbox（PS中上传了我的代码）。如果有人帮我，我会很高兴。

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

解决方法

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

,

我试图重现该png图像。我已经更改了您的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>

,

您可以给予：

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

这将解决您的问题

,

我在社交图标上添加了margin-left: auto;，以便他们将剩余的空间用作左侧的空白

我已将margin: auto;添加到.policy中，因此它将居中（但不是绝对居中），并向margin-right元素中添加了一点p他们之间有一点空间

.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;
  margin: auto;
}


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

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


.social-media .social-media-icon {
  margin-left: auto;
}

.social-media .policy p {
  margin-right: 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>