[Learning]#10 CSS3 Flexbox: nav style setting

What is nav?

• nav = navagator
• “The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.” by Mozilla

Resource: https://pixabay.com/

Final Design

Horizontal alignment with Flex

Before

nav{}
 
nav>.logo{
    background-color:#ffcccc;
}
nav>.menu{
    background-color:#ccccff;
}
nav>.user{
    background-color:#ccffcc;
}

After

nav{
    display: flex;
}
 
nav>.logo{
    flex:none;width:100px;
    background-color:#ffcccc;
}
nav>.menu{
    flex:none;
    background-color:#ccccff;
}
nav>.user{
    flex:none;width:100px;
    background-color:#ccffcc;
}

If you want the menu to extend automatically, replace the “none” of menu with “auto.” The length of menu will adapt to the page size while we change its pixel.

Music of Today: Thunder by Imagine Dragons

Clap/Share/Follow

If you guys find this article helpful, please kindly do the writer a favor — giving 5 clicks at the GREEN area and 10~50 claps at the bottom of this page.

Most important of all, feel free to comment and share your ideas below to learn together!

Subscribe