Day 33: Flexbox Layouts

Today I went over the flexbox layouts.  The instructor included the logo part of the heading/nav bar as part of a list item, so that he could then manipulate it with this pseudo-element.

 .main-logo:first-child {

margin-right: 50px;
flex-grow: 1.5;
}

He also use this code to get the flexbox set up:

.main-nav {
display: -webkit-flex;
display: flex;
height: 100%;
}

.main-nav li {
-webkit-align-self: center;
align-self: center;
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: 8px;
margin-right: 8px;
}

We used to code below to exempt the logo from a transition effect:

.main-nav li:hover:not(.main-logo) {
flex-grow: 2;
}

We used this code to insert some icons and transitions for those icons:

.main-nav a {
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
position: relative;
overflow: hidden;
}

.main-nav a::before {
font-family: 'icomoon';
  content: attr(data-icon);
color: #fff;
position: absolute;
top: 10px;
left: -30%;
}

Regarding flex-boxes, the code below sets up equal columns:

.content-row {
display: flex;
}
.col {
flex: 1;
}

If you add the code below, one of the columns (whichever you designate with the primary-content class) will take up more space than the others:

.primary-content {
flex: 2;
}

The code below will move the targeted column to the left:

.primary-content {
flex: 2;
order: -1;
}

The code below will move a column to a spot to the right of the column in the code above, but before another column which has not been assigned an order value:

.extra-content {
order: 1;
}

This is what the code looks like after adding the webkit code:

.content-row {
display: -webkit-flex;
display: flex;
}
.col {
-webkit-flex: 1;
flex: 1;
}
.primary-content {
flex: 2;
-webkit-order: 1;
order: -1;
}
.extra-content {
-webkit-order: 1;
order: 1;
}

We used this html code as the last element in the head, to enable some javascript code:

<script type="text/javascript" src="js/modernizr.js"></script>

The code helps browsers display flexboxes correctly.  The code below provides alternate code for the browser to run if it does not show flexboxes:

.no-flexbox .main-nav li {
display: inline-block;
margin-top: 12px;
width: 150px;
}

SUMMARY OF CODING SKILLS

Total Treehouse Points: 2,196
Treehouse Points by Subject Matter: HTML 663, CSS 1,503, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 77% of all students."

Badge(s) Earned Today:
Flexbox-Layout

Courses Completed:
How to Make a Website
HTML
CSS Foundations

Books Read or in Progress:"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

Hours Spent Coding Today: 4
Total Hours Coding: 142.5