An example combining display: inline-block with flexbox, used as the final illustration for an article on my blog
A Pen by rafalohaki on CodePen.
Created
July 13, 2020 00:38
-
-
Save rafalohaki/f406ff9f881ee131d5c6897f89d64840 to your computer and use it in GitHub Desktop.
Simple Navigation With Inline-Block & Flexbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav> | |
| <div> | |
| <a href="#">Home</a> | |
| <a href="#">Products</a> | |
| <a href="#">About</a> | |
| </div> | |
| <a href="#">Help</a> | |
| </nav> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| nav { | |
| background: #222 url(//demosthenes.info/assets/images/debut_dark.png); | |
| font-family: proxima-nova,sans-serif; | |
| font-size: 0; | |
| display: flex; | |
| justify-content: space-between; | |
| max-width: 800px; | |
| margin: 2rem auto; | |
| } | |
| nav a { | |
| font-size: 1.4rem; | |
| color: #fff; | |
| text-decoration: none; | |
| transition: .4s; | |
| display: inline-block; | |
| padding: 1rem; | |
| } | |
| nav a:hover { | |
| background: rgba(255,0,0,0.5); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment