flexbox does not work in my html, how can i fix it?-CodePudding

I'm having a trouble with flexbox, i'm just learned it from wesbos (https://github.com/wesbos/What-The-Flexbox/tree/master/flexbox-nav)i tried to create a navbar like him[it's supposed to be looked like this but mine isn't working and it turned out like this Sorry for my bad english, i'm also new to css

.container3 a {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  transition: all 0.5s;
}

.container3 ul {
  list-style: none;
  border: 1px solid black;
  margin: 0;
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
}

.container3 li {
  flex: 1;
}

.container3 a:hover {
  background: rgba(0, 0, 0, 0.2);
}

<nav >
  <ul>
    <li><a href="#">About!</a></li>
    <li><a href="#">My Home</a></li>
    <li><a href="#">Contact</a></li>
    <li ><a href="#"><i ></i> </a></li>
    <li ><a href="#"><i ></i></a></li>
    <li ><a href="#"><i ></i></a></li>
  </ul>
</nav>

CodePudding user response：

If you're going to use flex: 1; as a substitute for justify-content: space-around; on .container3 ul then you should also use text-align: center; to center the nav items. It also appears there is a max-width on the desirable navbar in your screenshots.

.container3 a {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  transition: all 0.5s;
}

.container3 ul {
  list-style: none;
  border: 1px solid black;
  margin: 0;
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  text-align: center;
  max-width: 1400px;
  margin: auto;
}

.container3 li {
  flex: 1;
}

.container3 a:hover {
  background: rgba(0, 0, 0, 0.2);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<nav >
  <ul>
    <li><a href="#">About!</a></li>
    <li><a href="#">My Home</a></li>
    <li><a href="#">Contact</a></li>
    <li ><a href="#"><i ></i></a></li>
    <li ><a href="#"><i ></i></a></li>
    <li ><a href="#"><i ></i></a></li>
  </ul>
</nav>

CodePudding user response：

<a> tag is inline-element, so when it comes to adding margin and padding, browsers treat inline elements differently. You can add left & right margins and padding, but not top & bottom and cannot have a extra width and height set.

So for your purpose to add CSS properties of both padding: 20px 0; and width: 100%; to take effect on the a tag it needs to be converted into a inline-block element by adding display: inline-block; which respects top & bottom margins and padding as well as respects height and width.

"it's supposed to be looked like a [1] picture, i mean i want all icons and texts separated equally and have a equal hovering background"

Working Example as per the above comment:

.container3 a {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 20px 0;
  width: 100%;
  text-align: center;
  transition: all 0.5s;

  /* Converted <a> element from inline to inline-block */
  display: inline-block;
}

.container3 ul {
  list-style: none;
  border: 1px solid black;
  margin: 0;
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
}

.container3 li {
  flex: 1;
}

.container3 social a,
img {
  width: 100%;
  height: 100%;
}

.container3 a:hover {
  background: rgba(0, 0, 0, 0.2);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<nav >
  <ul>
    <li><a href="#">About!</a></li>
    <li><a href="#">My Home</a></li>
    <li><a href="#">Contact</a></li>
    <li ><a href="#"><i ></i></a></li>
    <li ><a href="#"><i ></i></a></li>
    <li ><a href="#"><i ></i></a></li>
  </ul>
</nav>