Flex-box(Css): Distance between flex-box items

Question

I am really new in flex-box. I have been playing around with flex-box by using Saas. My goal is keep distance between flex-box items like this:

I could not able to do that. I have upload my code in Codesandbox(PS. In my codesandbox I used css). I will be glad if someone help me out.

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

score 1 · Answer 1 · answered Aug 11 '20 at 07:28

1

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

answered Aug 11 '20 at 07:28

waiaan

210
1
4

Thanks @waiaan. How can I make distance between `cookie policy` , `terms of use` and `privacy notice`. – Krisna Aug 11 '20 at 07:32
.social-media .policy p { margin-right: 20px; } like this – Nico Shultz Aug 11 '20 at 07:33
@NicoShultz it did not help :(. – Krisna Aug 11 '20 at 07:35
thats weird, could you check my full answer if that might help? the snippet seems to do what you want. It also has the space between the items – Nico Shultz Aug 11 '20 at 07:36
`.policy{ font-size: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; } .policy p { margin-right: 20px; }` This one helped. – Krisna Aug 11 '20 at 07:36
like @NicoShultz said , it would work. could you update your codesandbox? – waiaan Aug 11 '20 at 07:37

score 1 · Accepted Answer · answered Aug 11 '20 at 07:37

i've tried to reproduce that png image. i've change a little bit your 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>

score 0 · Answer 3 · answered Aug 11 '20 at 07:32

0

You can an give:

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

this will solve your issue

answered Aug 11 '20 at 07:32

Sandip Swain

417
1
4
10

score 0 · Answer 4 · answered Aug 11 '20 at 07:32

I've added margin-left: auto; to the social icons so they will use the remaining space as margin to the left

I've added margin: auto; to .policy so it wil be centered in between (but not absolutely centered) and added a little margin-right to the p elements so there is a little space between them

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

Flex-box(Css): Distance between flex-box items

4 Answers4