Flexbox Lesson #4

In this lesson we'll add content to the nav element.

We begin by creating a child container named middle inside the nav element.

We do this so that we can use the float property for aligning the elements that make up our navigation system. You could even add a plug and play navigation device inside the child container.

We use an unordered list for adding our links. You would of course replace the items with anchor tags.

 

Fourth Exercise

Copy and Paste the code in red inside the nav element

<nav>

<div class="middle">
<ul>
<li>Products</li>
<li>Pricing</li>
<li>Services</li>
</ul>
</div>

</nav>

🔴 Save flex-tutorial.html

 

Copy and Paste the CSS below the last entry in the style sheet.

nav { /*begin nested nav*/
   div.middle { /*child container*/
     flex:1;
     padding : 0 ; margin: 0;
              }

   div.middle ul {
           list-style : none;
            float: left; /*float allowed in child container*/
                 }

   div.middle ul li {
            float: left;
            padding: 0 1rem 0 0; /*padding right side only*/
                    }
     } /*End nested nav*/

🔴 Save flex-tutorial.html

 

👀 Once you get everything added to the style sheet and saved, look at the HTML page with a browser or Preview function of HTML Editor. Refresh or reload if the page is already open.

The Result

You should see something similar to this image. It may vary depending on whether you chose to keep the full viewport width or changed to a max-width setting.

 

Explanation

flex : 1; This is shorthand for some properties we won't go into to avoid confusion. In laymans terms it just tells the browser to allow the column to shrink and grow as needed. If more than one, there would be a default shared width for each.

We'll learn how to increase the width soon.

Remember, conventional CSS can be used inside child containers for adding images, in this case lists and other page elements.

Do It With Flexbox

If you wanted to accomplish the same task using flexbox instead of the float property, here's the CSS.

Remember, flex-direction row is the default.

nav { /*begin nested nav*/
  div.middle { /*child container*/
     flex:1;
     justify-content left;
     align-items : left;
     padding : 0 ; margin: 0;
              }

      ul {
      display: flex; /* Enables Flexbox */
      list-style: none; /* Removes bullet points */
      padding: 0; /* Removes default padding */
      margin: 0; /* Removes default margin */
         }

         li {
             margin: 0 1rem 0 0; /* Adds spacing right side only */
             }
     } /*End nested nav*/

 

Top