From the course: CSS Shorts

Unlock this course with a free trial

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

Span flex columns

Span flex columns - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Span flex columns

“

- [Instructor] Hi, this is Chris Converse and in this episode, we'll use the flex wrap and width properties in order to make a headline span across all columns within a flex container allowing for a more complex layout without the need for additional markup in the HTML file. So, if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in a text editor. And, once you have the HTML file open, you'll see that we have the link to style.css up in the head area. We're going to open this in a moment. In the HTML file, you'll also see inside of the article element, we have an H2 and we have two div elements. If you preview the page in a browser, you'll see the H2 here and these two div elements with what is a spice and what is an herb. So, when we apply flex properties, the H2 and the two divs are all going to be treated as individual columns. So, what we want to do is create a layout where the H2 will span across like it is here, but we'll get…

Contents