[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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vida Lin

Vida Lin

43 Followers

PM, Relationship, Travel, or anything quirky but interesting.|Subscribe & buy Vida a drink @LikerLand, the bottom of each article. 在文章底下LikerLand訂閱、請Vida喝一杯飲料 ❤