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.
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!
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