Learn Flexbox in Under 15 minutes
Microthemer & Flexbox Video

Published: August 15, 2017By Sebastian
Watch CSS Flexbox video (14 mins)

Learn how to master CSS flexbox properties by watching the above flexbox video. Sebastian will walk you through each flexbox property, highlighting important concepts along the way. By the end of it, you will know:

  1. What each flexbox property is used for.
  2. Which flexbox properties should be applied to the container element, and which should be applied to the flex items.
  3. How flex-direction sets the main axis and cross axis. And what implications this has for other flexbox properties like justify-content and align-items.
  4. How flex-grow relates to ‘positive space’.
  5. How flex-shrink relates to ‘negative space’.
  6. How Microthemer can soften the learning curve for flexbox by including vendor prefixes and providing visual cues to keep track of the main axis.

Get Interactive

A

word

B

another word

C

some more words

D

words of varying length

E

Content length affects flexbox

F

And flexbox can affect content length

G

Flex-direction:row is the default

H

Flex-direction:column changes the affect of other properties

 

Copy and paste the following HTML code for the colored boxes onto your site so you can experiment with flexbox the visual way. Follow along with the flexbox video or try out your own styles to explore the full potential of flexbox.

<div class="container-element" style="border:5px solid royalblue; color:black">
	<div class="flex-item" style="background-color:coral;"><h3 style="margin:0">A</h3><div>word</div></div>
	<div class="flex-item" style="background-color:lightblue;"><h3 style="font-size:smaller;margin:0">B</h3><div>another word</div></div>
	<div class="flex-item" style="background-color:khaki;"><h3 style="margin:0">C</h3><div>some more words</div></div>
	<div class="flex-item" style="background-color:pink;"><h3 style="font-size:smaller;margin:0">D</h3><div>words of varying length</div></div>
	<div class="flex-item" style="background-color:DarkSalmon ;"><h3 style="margin:0">E</h3><div>Content length affects flexbox</div></div>
	<div class="flex-item" style="background-color:Plum;"><h3 style="font-size:larger;margin:0">F</h3><div>And flexbox can affect content length</div></div>
	<div class="flex-item" style="background-color:Orange ;"><h3 style="margin:0">G</h3><div>Flex-direction:<b>row</b> is the default</div></div>
	<div class="flex-item" style="background-color:Beige ;"><h3 style="font-size:x-large;margin:0">H</h3><div>Flex-direction:<b>column</b> changes the affect of other properties</div></div>
</div>

And if you get stuck, feel free to post in our forum!

More Flexbox Videos – Real World Examples

The following 3rd party flexbox videos demonstrate how to apply flexbox in the real world. They’re a bit more technical as they focus more HTML and CSS code.

  1. Flexbox Tutorial (CSS): Real Layout Examples
  2. CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)

What is Microthemer?

Microthemer is a visual CSS editor for WordPress. It serves as a handy training tool for visually demonstrating key concepts in the above flexbox video. But it’s primary purpose is customizing the appearance of WordPress themes. Download the free trial to test out on your own WordPress site, or grab yourself a standard or developer license (30 day money back guarantee).

Close