How do I style nested flexbox?-CodePudding

I am trying to create a navbar using two flex box nested in one parent container. but I can't style inner flexbox without affecting the main container items. my layout suppose to look like this navbar-idea

My code:

*,
*::after,
*::before,
* li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
}

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
}

.link-container {
  display: flex;
}

.user-feature {
  display: flex;
}

<nav >
    <div >
        <ul >
            <li><a>HOME</a></li>
            <li><a>CONTACT</a></li>
            <li><a>ABOUT</a></li>
        </ul>
    </div>

    <div >
        <img src="https://www.theodinproject.com/assets/icons/odin-icon-b5b31c073f7417a257003166c98cc23743654715305910c068b93a3bf4d3065d.svg" alt="">
    </div>

    <div >
        <ul >
            <li><a>LOG IN</a></li>
            <li><a>CART</a></li>
        </ul>
    </div>
</nav>

right now everything is fine but when I apply padding to link-container it also affects main-navbar items and I can't align logo verticaly center. is it possible with flex?

I wanna know what causes flex to behave like this?

CodePudding user response：

I think this is what you're trying to do. I've just used position: property of CSS.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
}

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:30px 0 0 0;
  padding: 10px 4rem;
  position:relative;
}

.link-container {
  display: flex;

}
.link-container li{
  padding:10px;
}

.image-container{
  position:absolute;
  left:50%;
  transform:translate(-50%);
  
}


.user-feature {
  display: flex;
}

.user-feature li{
    padding:10px;
}

    <nav >
        <div >
            <ul >
                <li><a>HOME</a></li>
                <li><a>CONTACT</a></li>
                <li><a>ABOUT</a></li>
            </ul>
        </div>

        <div >
            <img src="https://www.theodinproject.com/assets/icons/odin-icon-b5b31c073f7417a257003166c98cc23743654715305910c068b93a3bf4d3065d.svg" alt="">
        </div>

        <div >
            <ul >
                <li><a>LOG IN</a></li>
                <li><a>CART</a></li>
            </ul>
        </div>
    </nav>

CodePudding user response：

*,
*::after,
*::before,
* li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
}

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
}

.link-container {
  display: flex;
 padding: 10px;
}
.image-container {
  padding-right: 20px;
}
.user-feature {
  display: flex;
}

Give same padding*2 for padding-right of .image-container for example i gave 10px for link-container and 20px for .image-container padding-right.Thanks