From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Flex your columns

Flex your columns - CSS Tutorial

From the course: CSS Shorts

Flex your columns

- [Chris] Hi, this is Chris Converse and in this episode we'll create some columns in our web page using the CSS flex property. The flex property gives us greater control over layouts and they're responsive allowing us to change the layout for smaller screens. And while the flex property is still rather new, all modern HTML5 browsers support the property, including partial support for IE11. So, if you'd like to follow along with me, download the exercise files and let's begin by opening index.html in a text editor. Now, once you have the HTMl file open, in the top head area we have a link to style.css which we'll open in a moment. In the body area we have a main HTML5 element, inside of the main element we have an h1, and then a section element, and inside of the section element we have three div elements. This one here, one here and one here. It's these div elements that we're going to turn into columns using the flex property. And if you'd like to preview the layout we're going to…

Contents