Closed Css | navigation in display: flex

[_iamkurt]

Let us create a basic navigation with just simple understanding on how to use display: flex;

Here is the markup:

<nav>
      <a href="#">home</a>
      <a href="#">tech</a>
      <a href="#">news</a>
      <a href="#">media</a>
      <a href="#">contact</a>
</nav>

Here is our CSS rules.

body{
      padding: 0;
      margin: 0;
}

nav{
      background-color: rgba(0,0,0,0.9);
      color: #fff;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content:center;
     
      a{
            color: inherit;
            display: inline-block;
            margin: 1rem;
            text-decoration: none;
      }
}

Display flex has been applied to nav element, and all the child element inside the nav, which are the a tags, will be displayed horizontally by default, then apply:

justify-content:center;

which gives you this layout shown below:

Let us get the spacing done by adding the margin rules to a tag:

margin: 1rem;

If you wish to get the wrapping issue for nav element, see:



Just add this rule below:

flex-wrap: wrap;

If you wish to see this in action, please see:
You do not have permission to view the full content of this post. Log in or register now.

 

[xiaoyi]

Nice thanks bro , yang sa flex ako talaga nahirapan , need pala ng flex wrap

 

[Shiraori]

Uy, pwede pala yun. Thanks po sa share.

 

[F A L L E N]

alin mas maganda ts flex or grid ??

 

[_iamkurt]

alin mas maganda ts flex or grid ??

Good question. I will create another tutorial on this topic. And explain the difference between flex and grid. Stay tune.

 

[F A L L E N]

Good question. I will create another tutorial on this topic. And explain the difference between flex and grid. Stay tune.

ok po kasi medyo naguguluhan ako pero yung iba mas gamit nila ang grid eh

 

[Romesky]

Salamat ts