So, Wednesday was Day 3 at Lambda School for me. On Day 2, our project was to build a website with provided assets using semantic html and CSS. We used inline-block a lot and some absolute and relative positioning to do a lot of the styling work. It was a tedious process, and I didn’t actually complete the project.

This changed a bit for the better on Day 3. We were introduced to the Flexbox module, and if I weren’t already bald, it might have saved some hair on my head. The module is called using the display keyword in CSS:

display: flex;

Once invoked, it unlocks a suite of formatting options that allow groups of elements to be formatted at once with single commands that might have otherwise taken lines of code to duplicate. Its the anti-inline-block.

Flexbox is called on a parent element and then it works its magic on the children elements. It only works one generation down though, so grandchildren and other elements that are further nested are unaffected. The parent is called a flex container and the children are flex items. It allows elements to be arranged based on an X and Y axis, called the main axis and cross axis, respectively. So, the main axis runs horizontally (left/right) and the cross axis runs vertically (up/down).

Some of the things that can be done with Flexbox include:

• Changing the default flow direction of elements from horizontal to vertical
• Changing flow direction from left-right to right-left
• Changing flow direction to up-down or down-up
• Causing elements to “wrap” to multiple lines instead of trying to all flow on one long line
• Causing elements to “wrap” in reverse
• Justifying content to start on the left, the right or centered
• Evenly-distributing elements on a line (stretching them across the entire line)
• Evenly-distributing elements on a line with equal space around them, or between them
• Aligning items along the Y-axis so they stretch to fill the container they’re in or they line up in columns either starting from the top or bottom of a container, or they do that same thing in the center of a container – either evenly distributed or in accordance with their baselines
• Doing all of that stuff from the last bullet horizontally instead of vertically
• Manipulating the order that elements are laid out in a container based on a weighted number assigned to each element
• Grow or shrink an item (or items) in a flex container so it takes up more or less space

There are some more functions, but I didn’t explore all of them. What I made use of the most were justify-content and align-items Flexbox functions, and some flex-wrap. This is a fantastic page that shows graphical examples of what Flexbox is capable of:

• CSS TRICKS: A Complete Guide to Flexbox

Project

The project for Day 3 called for us to refactor the code we wrote on Day 2 using Flexbox. Basically, we took our old html and used it as the basis for the new project. We changed all of the css to move from using inline-block to Flexbox. It was amazing. Although it took me some time to complete, I was able to finish the entire project, and even add in some small touches of my own.

The lines of css code on Day 3 was significantly less than on Day 2, because Flexbox handled a lot of grouping and positioning with single lines that would have taken several each using the css that we’d learned earlier in the week.

Overall, Day 3 was a much better day for me that Day 2 was. I understand the concepts that we’re learning, although I’m still slow in implementing them. I think I know how to proceed going forward though: I think I need to map out parts of the web pages that I’m building on paper so I can layout which Flexbox controls I need for different sections on a page. Its basically paper-prototyping, but for some of it, I’ll be reverse-engineering existing html and css.