How can I decrease the space between my flex elements?-CodePudding

I'm making a header and in that header I want the margin between the social media links to be small while the margin between the home, about, policy, contact links to normal.

this is what it looks like

this is my html

 <header>
            <div>
                <ul>
                    <li><a  href="#"><i ></i></a></li>
                    <li><a  href="#"><i ></i></a>
                    <li><a  href="#"><i ></i></a></li>
                    <li><a  href="#">home</a></li>
                    <li><a  href="#">about</a></li>
                    <li><a  href="#">policy</a></li>
                    <li><a  href="#">contact</a></li>
                </ul>
            </div>
        </header>

this is my css

header {
    position: sticky;
    top: 0;
    /* sticky with top 0 make the bar sticks to the top */

}

header ul {
    display: flex;
    position: absolute;
    width: 100%;
    /* when using flex and absolute you will need width % to make your items fill the screen */

}

header ul li {
    list-style: none;
    flex-grow: 1;

}

header .links-header {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s;

}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    transition: .5s;
}

ps: I'm a begginer at css and this is my first time using flex anyway, so I'd be thankful if you point out any mistakes you find as well.

I tried setting a negative margin but that didn't work as inteneded.

CodePudding user response：

You can keep the HTML valid and leverage flex-grow. Add a class to the list items you want to adjust then use flex-grow:0.5; or a value that works for you.

body {
  background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__480.jpg') no-repeat;
  background-size: cover;
}

header {
  position: sticky;
  top: 0;
  /* sticky with top 0 make the bar sticks to the top */
}

header ul {
  display: flex;
  position: absolute;
  width: 100%;
  /* when using flex and absolute you will need width % to make your items fill the screen */
}

header ul li {
  list-style: none;
  flex-grow: 1;
}

header .links-header {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.537);
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  transition: .5s;
}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.537);
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  transition: .5s;
}

header ul li.social-header{
  flex-grow:0.5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
  <div>
    <ul>
      <li ><a  href="#"><i ></i></a></li>
      <li  ><a  href="#"><i ></i></a>
      <li  ><a  href="#"><i ></i></a></li>         <li><a  href="#">home</a></li>
      <li><a  href="#">about</a></li>
      <li><a  href="#">policy</a></li>
      <li><a  href="#">contact</a></li>
    </ul>
  </div>
</header>

You could also skip adding a class and use the nth-child pseudo class, but an explicit class is better .

body {
  background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__480.jpg') no-repeat;
  background-size: cover;
}

header {
  position: sticky;
  top: 0;
  /* sticky with top 0 make the bar sticks to the top */
}

header ul {
  display: flex;
  position: absolute;
  width: 100%;
  /* when using flex and absolute you will need width % to make your items fill the screen */
}

header ul li {
  list-style: none;
  flex-grow: 1;
}

header .links-header {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.537);
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  transition: .5s;
}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.537);
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 6px;
  padding-right: 6px;
  transition: .5s;
}

header ul li:nth-child(-n   3){
  flex-grow:0.5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
  <div>
    <ul>
      <li><a  href="#"><i ></i></a></li>
      <li><a  href="#"><i ></i></a>
      <li><a  href="#"><i ></i></a></li>         <li><a  href="#">home</a></li>
      <li><a  href="#">about</a></li>
      <li><a  href="#">policy</a></li>
      <li><a  href="#">contact</a></li>
    </ul>
  </div>
</header>

CodePudding user response：

The easiest solution would be to put the 3 "li" containing the social media links inside a div and give that div a width. This can be achieved using the below code. The shorter the width of the container div, the closer your social media icons.

body{
  background:url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__480.jpg') no-repeat ;
  background-size:cover;
}


header {
    position: sticky;
    top: 0;
    /* sticky with top 0 make the bar sticks to the top */

}

header ul {
    display: flex;
    position: absolute;
    width: 100%;
    /* when using flex and absolute you will need width % to make your items fill the screen */

}

header ul li {
    list-style: none;
    flex-grow: 1;

}

header .links-header {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    transition: .5s;

}

header .social-header-facebook,
.social-header-instagram,
.social-header-twitter {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.537);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 6px;
    padding-right: 6px;
    transition: .5s;
}

.social-icons{
  width:20%;
  display:flex;
  padding:0 10% 
}

<header>
            <div>
                <ul>
                  <div >
                     <li><a  href="#"><i ></i></a></li>
                    <li><a  href="#"><i ></i></a>
                    <li><a  href="#"><i ></i></a></li>
                    
                  </div>
                   
                    <li><a  href="#">home</a></li>
                    <li><a  href="#">about</a></li>
                    <li><a  href="#">policy</a></li>
                    <li><a  href="#">contact</a></li>
                </ul>
            </div>
        </header>

PS: Please change your background accordingly. I have used one for demo purposes.