Flexbox

Lately I’ve been reading flexbox docs. There are a lot of really good articles already out there (linked below). I’ll share what I’ve learned using a few practical examples with links to the source and a few observations about the process.

Sample 1 (simulated simple bootstrap grid)

This is not my first time working with flexbox but when I initially compared it to the bootstrap grid, I preferred bootstrap because I felt like I had a little more layout control.

One area where flexbox is much better than bootstrap is in footprint size. There is a lot of code in bootstrap that goes unused and defining a responsive grid using flexbox does not require very much code.

*Please click the upper left corner to get to the pen content and then the Edit on CODEPEN link (upper right) will also be available.

Note: this grid collapses in mobile device view also there are some observations in the content header.

Sample 2 (example of vertical layout)

This example specifically refers to when would you prefer to use

flex-direction: column 

One scenario could be if you have a bunch of dynamic content with similar widths but varying heights (photos or maybe work portfolio samples). Typically a grid system with this kind of content would force an alignment with a bunch of irregular white space between elements.

Tip: When you want the content to lay out with an even bottom edge (desktop/tablet views) you need to mind that the total height for elements in each column would equal the flex container height. Otherwise a jagged bottom edge could result (which I guess could be an option).

Note: This grid collapses in mobile device view.

 

Sample 3 (simulation of a marketing homepage)

To test the ease of use of flexbox, this is a simulation of a consumer hardware company’s homepage. They do great marketing design. This simulation does not go into the nitty gritty details (like navbar responsive design) but emulates their body/footer responsive design. It did not feel too labor intensive and the code footprint is still very light.

Note: the breakpoints are between mobile:tablet, and between tablet:desktop

https://codepen.io/cch5ng/full/gRwYPe/

Final tip: My initial observation when googling flexbox is that it is potentially a very complex topic to learn. Rather than starting with a site that contains a ton of reference info about each property, I like the link below by webdesignerwall because of their visual style of teaching and simplicity.

Afterward, please search further for more advanced tutorials on flexbox because this is only the tip of the iceberg (but hopefully helpful).

Resources

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s