I mentioned that flex box allows items to move inside a container. In the last post, I use buttons as an example to show how do those buttons move in the flex box. Today, I learned navs can also move in a flex box.
I would love to share my study note here.
Firstly, I copy the Bootstrap 4 starter template on the editor, and also put the base nav code in the body.
In order to show how navs move in the flex, I add a border outside the navs. The result shows a base nav bar inside a box.
Move in Row
Then, I want to add some space between each nav items, so I set“justify-content-around” value in the <ul>.
- .The result:
You can also move the items to the right (justify-content-end) or to the center (justify-content-center).
Move Vertically
If I want to show my nav bar vertically, I can just simple set“flex-column”value.
The result:
Responsive Nav
If I want the nav bar change from the horizontal to vertical as the page changes to a smaller size, I can add“flex-sm-row align-items-center”next to the “flex-column” value.
The result:
网友评论