How to Create Responsive Columns of Equal Vertical Height with Flexbox CSS

October 2, 2014 3:50 pm
More videos
1,467
Views
   
PluginForage.com Member

How to Create Responsive Vertical Columns
of Equal Height with Flexbox CSS

This video is an in-depth discussion about responsive HTML and CSS column equal height issues. In the video, the focus is on vertical height issues with responsive columns. I take a look at the most common way of creating responsive columns and demonstrate the issues associated with the vertical height display and offer a quick and easy way to address the vertical column equal height issue by using a CSS3 flex display property.

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

Flexbox is more than just a solution for vertical column equal height. Flexbox is a flexible box model for laying out websites.

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents. source

Recommended Responsive Design Courses

Flexbox, media queries, grids all covered.
Take your HTML & CSS skills to the next level by creating responsive websites!

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Mobile First & Responsive Web Design: Build modern websites!

Resources:

Code Snippets for Flexbox Video
Code Pen: HTML and CSS markup for vertical columns using Flexbox
WordPress.tv: Morten Rand-Hendriksen’s in-depth video discussion about Flexbox
CSS-Tricks.com: Old fashioned hard way to create responsive vertical columns with equal height

(1467)

1 Comment

  • mrthappy
    Reply

    really exciting video on flexbox ,however have to ask , how could you acquire the position of the three boxes including the links , when this element is in an flex container .thank u..
    i have been trying to build a layout but am having problem with position elements in a flexed container

Share your thoughts!