How to use Flexbox and space-between In CSS
Using Flexbox with ‘ justify-content: space-between ‘ aligns items with maximum space between them, pushing the first item to the start and the last item to the end of the container. This creates a layout where space is distributed evenly, providing a clean and organized appearance to the elements.
Approach
- Create the structure of the navbar in HTML using different types of the elements including <div>, <ul>, <li>, and button.
- There are two unordered list defined where the first have three list items and the second have only one list item.
- Cretae a external stylesheet and link to the index.html file for defining the style to the navbar.
- Use property display flex and justify-content space between to split navigation bar.
Example 1: The example shows split navigation bar using CSS with various flexbox properties.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1.0" > < title >Navbar</ title > < link rel = "stylesheet" href = "index.css" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" > </ head > < body > < div class = "box" > < div class = "nav_list_box" > < div class = "navlistleft" > < ul > < li > < a href = "#" > < i class = "fa fa-solid fa-house" > </ i > Home </ a > </ li > < li > < a href = "#" > < i class = "fa fa-solid fa-address-card" > </ i > About </ a > </ li > < li > < a href = "#" > < i class = "fa fa-solid fa-address-book" > </ i > Contact Us </ a > </ ul > </ div > < div class = "navlistright" > < ul > < li > < a href = "#" > < i class = "fa fa-solid fa-book" > </ i > Courses </ a > </ li > </ ul > </ div > </ div > </ div > </ body > </ html > |
CSS
/* style.css */ @import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); * { margin : 0 ; padding : 0 ; box-sizing: border-box; } .box { background-color : rgb ( 111 , 201 , 108 ); font-family : 'Poppins' , sans-serif ; } .nav_list_box { display : flex; justify- content : space-between; align-items: center ; height : 10 vh; } ul { list-style : none ; } .navlistleft ul { display : flex; align-items: center ; gap: 20px ; margin-left : 20px ; } li { font-size : 20px ; } .navlistright ul { margin-right : 20px ; } li { transition: . 2 s linear; } li:hover { color : rgb ( 9 , 21 , 4 ); transform: translateY( -3px ); } a { text-decoration : none ; color : rgb ( 23 , 64 , 7 ); } a:hover { color : rgb ( 9 , 21 , 4 ); font-weight : 700 ; } @media only screen and ( max-width : 513px ) { li { font-size : 15px ; } } @media only screen and ( max-width : 424px ) { li { font-size : 10px ; } } |
Output:
How to create a split navigation bar using CSS ?
The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. It is used to achieve a balanced look for the navbar.
Table of Content
- Using Flexbox and space-between
- Using CSS Position Property