- [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 be starting from,
you can open index.html in a browser.
And so now at this point
let's go back to the exercise files.
Let's open style.css up in our text editor.
Let's scroll down a little bit
and let's first find the section selector,
which is here on line 37.
So, the section element has the divs inside
that we want to have rendered into columns.
So, on the section element here,
let's come in, let's add a property.
You can put this before or after the margin setting.
And let's come in here and set a display property of flex,
so that will turn the main section element
into a flex object.
Next line let's set a flex property,
so the property we're going to set is going to be flex direction,
so flex-direction and we're going to set this to row.
Now, this is the value
that's set for flex direction by default
but I like to go ahead and set this anyway.
And so now with these two items in place,
if we hit save and go back to the browser,
we'll already begin to see the div elements
starting to render in columns.
Now, one thing you might notice
is that the columns are not even width.
So, the first column here
is less wide than the second column
and the second column is less wide than the third column.
So, the widths are being determined by the content
inside of the div elements.
So, at this point let's go back to the CSS,
let's find our section with a greater than sign
and then div.
We're just targeting all the divs
that are immediately inside of the section element.
I have a padding of 18 set here.
So, after padding let's come in here
and add some additional properties.
First, let's add a property called flex-basis
and we're going to set this to zero
and then put a semicolon.
So, what this will do is set the measurement
of these items based on the main parent container
with a display of flex.
If I hit save at this point
and go back to the browser,
we'll now see that all of the columns
are now equal width.
However, they're not taking the full width
of the available space.
So again, back to our CSS,
after flex-basis in the section greater then sign div,
let's come in here and add another property.
Let's add flex-grow
and we're going to set that to one, then a semicolon.
So, what this means is we're applying the same value
to every one of the div elements
inside of section,
and if they all have the same value,
they're going to render inside of that section element
with the same width.
So, with that in place, save your file,
go back to the browser,
hit reload and we'll now see that the width
of all of the columns is now equal,
even if I resize the browser.
So, at this point let's add some additional CSS rules
to remove these columns
if our screen size is below 550 pixels.
So, I'll change the width of my browser here
so that we're under 550,
back to the CSS, let's scroll down.
I've already put in an in line media query here
with a maximum width of 550.
Let's come in here and redefine some of the properties
to remove these columns.
So, the first thing we'll do
is target the section element.
So, I'll type section, put in our brackets,
split this open,
and then the property we're going to set inside of here
is going to be flex-direction
and we're going to set this to column instead of row
which is going to stack the individual elements
instead of having them render vertically.
Next property we're going to set section,
greater than sign, div.
Let's put in our brackets.
Split this open.
Let's come in here and change the padding property.
We're going to set zero padding on the top,
14 pixels on the right,
zero pixels on the bottom and 80 pixels on the left.
Next rule, section, space, div, space, h2.
Put in our brackets, split this open.
Let's come in here and set a margin-left property.
We're going to set this to negative 65 pixels
and then our final rule's going to be section,
space, div, space, image, split this open
and then inside here we're going to set a margin-left property
to negative 65.
With these in place you can hit save.
Let's reload in the browser.
We'll now see that we have our heading twos
and our images, negative 65 pixels to the left
and we'll now see that all of the div elements
are now taking up the full width
rendering in one single column.
So, with just a few flex properties
we're able to create columns out of section elements
and nest the div elements.
And now we've only scratched
the surface of the flex property.
If you'd like to learn more,
I'd recommend taking James Williamson's course
entitled CSS Flexbox First Look.
And so with that, I'll conclude this episode
and as always, thanks for watching.