This is single.php

How "Inception" Thinking Helps You Master Positioning (With Flexbox)

This is content-single.php

How “Inception” Thinking Helps You Master Positioning (With Flexbox)

 

While upgrading myself at HackerYou’s Bootcamp I ran across a sneaky-at-first-glance challenge that looked like this…

Flexbox within Flexbox

You’re wondering how this might be challenging right?

To a non-developer this seems like nothing out of the ordinary.

To a developer however it’s a positioning challenge.

 

Normally you’d need a grid system like Semantic GS, Bootstrap, Foundation or Bourbon Neat.

They all use floats, margins and/or padding.

 

As the web marches forward, flexbox is now supported on all modern browsers yet many agencies are slow to adopt this powerful, simple and easy tool to position elements naturally…

… in a way that adapts to the content.

The up side is that it uses no floats and automatically figures out the right margins and spacing for you.




 

Look Ma!  No hands!

 

Coming from a marketing and ad writing background a website should flow and support the copy not the other way around.

 

A developer needs to look at the image and break things up so that he can understand how to put the pieces together to get the final product.

 

Diving Into the Positioning Dream…

 

So this is what happened as I constructed the Lady E-commerce Demo

 

Break Down the MockUp for Flexbox Planning

 

Each box represents a <div> element or <section>.  

 

The best way to approach this is to start from the highest level or outermost level and work inwards.

 

This is very much like the movie Inception with Leonardo Dicaprio.

 

It’s a div within a div within a div…  like a dream within a dream within a dream…

 

If you tried to organize something like this without a grid system or flexbox it would be a nightmare… regular float properties won’t cut it.

Here’s a partial step by step process using pictures.

 

Flexbox Inception Step 1

  1.  We start with the highest level parent container (red) and its immediate children containers in blue.

That would be something like:

section.parent

div.left1

div.right1

 

We apply display: flex on section.parent with flex-flow: row-wrap so that div.left1 and div.right1 smack up right beside each other.

This is the most basic number of properties to apply — you’d use justify-content, align-content and align-items too — however I’m skipping those to keep things as crystal clear as glass.

 

 

Flexbox Inception Step 2

  1.  Here’s where the Inception thinking starts.

We focus on div.left1 (red) and break it down into a div.leftTop1 and div.leftBottom1 (blue).

Now you shift your “perception” of who is the parent.

div.left1 is now the parent and div.leftTop1 and div.leftBottom1 are the children.

 

You apply display:flex on div.left1 and flex-flow: column.

Since flexbox has no way of controlling the proportions of height like saying the top is twice as large as the bottom (right now it can do that only horizontally) you have to set an actual height on both div.leftTop1 and div.leftBottom1.

 

Flexbox Inception Step 3

 

  1.  Finally you drill deeper into the top and the bottom.

By now you get the picture.  

When you dig into div.leftTop1, it becomes the new parent so you apply display: flex to it and flex-flow: row wrap.

The blue squares are div.leftTopLeft and div.leftTopRight and take up equal horizontal space.

This is where you use flexbox children properties.

In this case div.leftTopLeft and div.leftTopRight are flex: 1 0 50% or flex: 1 50%.

 

Where flex-grow 1 means they both grow equally, 0 for flex-shrink doesn’t make any sense (so you could skip it) and flex-basis 50% means that the element should always be 50% of the parent’s width and never any larger or smaller.

 

This gets both sections right up against each other.

 

If you burrowed deeper into div.leftTopRight you could split it into div.leftTopRightTop and div.leftTopRightBottom.

Then you’d repeat what you did in Step 2.

 

And what about div.right1?  It’s a similar setup as the left side.

 

So Why Use Flexbox Here?

As you can imagine it’s a lot of <div> or <section> elements (or whatever you use).

 

The benefits however are great.  

It makes responsive coding and changes much easier as flexbox automatically adjusts element positions automatically, often cutting your responsive coding time in half or more.

In this situation you’re media queries would be sparse. 

 

Why?

 

Because you need only change things like flex: 1 50% to flex: 1 100% for the element to stretch across the screen when on a mobile device like the iPhone with 480px width.

There’s no margin, padding or float fidgeting.

 

Now you could use Bootstrap for example, use classes for non-semantic HTML5 markup and have it automatically do media queries.

If you don’t want to load more Javascript then using flexbox is a great option.

 



After Drew Minns demonstrated the use of Semantic GS and his own Deadset grid system to me, I used them until flexbox came along like a thundering train.  

Both are SCSS/SASS based and require no Javascript at all.

 

Regardless of what you use, the same ideas of breaking down the final end product and seeing the “building blocks” that you need to construct it are vital to positioning.

 

Work backwards.

 

Cheers,

Sunny Lam

 

Writing north of Queen Street East

 

Above GIF Source:  Giphy

Comments insertion starts here.

Leave a Reply