How to Create a Flexible Box with HTML and CSS
How to Create a Flexible Box with HTML and CSS
Here's a fast example of making a flex container with
some flex items.
We'll also see how
we can affect their size by adding more content, and playing around with some
property values.
Here's how we'll start it:
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
We've got a big wide red flex item, followed by a small
green and a small blue one.
Here's the relevant code from that example:
.container {
display: flex;
}
That's all we need in order to start using flexbox. Now
all of that flex container's in-flow children automatically become flex items
and are therefore laid out using the flex layout model.
But you'll notice that the red flex item is wider than
the other two. This is because we applied flex-grow: 1 to that item. Here's the
code we used for that:
.red {
background:
orangered;
flex-grow: 1;
}
The flex-grow property sets the flex item's grow factor,
which determines how much the flex item will grow relative to the other flex
items (after any positive free space is distributed).
The initial value is zero, so the other two items have a
grow factor of zero (because we haven't used the flex-grow property on those
items). This causes the red flex item to grow as much as needed to take up the
available space. The other two items oblige by shrinking until they just fit
their contents and no more.
Adding Content
You might be wondering why we didn't just set the width
of the red item by using the width property?
Yes, we could've done that. But if we had, I wouldn't
have been able to show you this next bit...
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
Flexbox items can
grow and shrink as needed to suit their contents.
All I did was add some content to the blue item, and it
grew as required in order to fit the new content. In fact, there was so much
content, that the red item completely shrunk to fit its own contents and no
more.
So this is what I meant when I said the grow factor
determines how much the item will grow after any positive free space is
distributed. By adding so much content to the blue item, we effectively removed
the available free space, and the red item had nowhere to grow.
The height of the blue flex item also grew to accommodate
the new content. And just as importantly, the other two items also increased
their height to match. With flexbox all this happens by default, so this saves
us from having to tweak heights and widths to try to get all our boxes looking
even.
Changing the Width
So now that I've showed you that you don't need to set
the width on your flex items, let's see what happens we do set the width.
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
width: 40vw;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
Flexbox items can
grow and shrink as needed to suit their contents.
As expected, the blue item becomes as wide as the
specified width. But because this now reduces the size of the blue item, the
red item grows again — but only as much as required to take up the available
free space.
So now we're beginning to see why it's called flexible
box layout. Our flex items are nice and flexible — they seem happy to fit in
with whatever's going on around them.
You can probably imagine how easy it would be to take
this a step further and create a basic template for a website layout. So let's
do that now.
Here's a fast example of making a flex container with
some flex items.
We'll also see how
we can affect their size by adding more content, and playing around with some
property values.
Here's how we'll start it:
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
We've got a big wide red flex item, followed by a small
green and a small blue one.
Here's the relevant code from that example:
.container {
display: flex;
}
That's all we need in order to start using flexbox. Now
all of that flex container's in-flow children automatically become flex items
and are therefore laid out using the flex layout model.
But you'll notice that the red flex item is wider than
the other two. This is because we applied flex-grow: 1 to that item. Here's the
code we used for that:
.red {
background:
orangered;
flex-grow: 1;
}
The flex-grow property sets the flex item's grow factor,
which determines how much the flex item will grow relative to the other flex
items (after any positive free space is distributed).
The initial value is zero, so the other two items have a
grow factor of zero (because we haven't used the flex-grow property on those
items). This causes the red flex item to grow as much as needed to take up the
available space. The other two items oblige by shrinking until they just fit
their contents and no more.
Adding Content
You might be wondering why we didn't just set the width
of the red item by using the width property?
Yes, we could've done that. But if we had, I wouldn't
have been able to show you this next bit...
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
Flexbox items can
grow and shrink as needed to suit their contents.
All I did was add some content to the blue item, and it
grew as required in order to fit the new content. In fact, there was so much
content, that the red item completely shrunk to fit its own contents and no
more.
So this is what I meant when I said the grow factor
determines how much the item will grow after any positive free space is
distributed. By adding so much content to the blue item, we effectively removed
the available free space, and the red item had nowhere to grow.
The height of the blue flex item also grew to accommodate
the new content. And just as importantly, the other two items also increased
their height to match. With flexbox all this happens by default, so this saves
us from having to tweak heights and widths to try to get all our boxes looking
even.
Changing the Width
So now that I've showed you that you don't need to set
the width on your flex items, let's see what happens we do set the width.
<!DOCTYPE html>
<title>Example</title>
<style>
.container {
display: flex;
}
.red {
background:
orangered;
flex-grow: 1;
}
.green {
background:
yellowgreen;
}
.blue {
background:
steelblue;
width: 40vw;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
</style>
1
2
3
Flexbox items can
grow and shrink as needed to suit their contents.
As expected, the blue item becomes as wide as the
specified width. But because this now reduces the size of the blue item, the
red item grows again — but only as much as required to take up the available
free space.
So now we're beginning to see why it's called flexible
box layout. Our flex items are nice and flexible — they seem happy to fit in
with whatever's going on around them.
You can probably imagine how easy it would be to take
this a step further and create a basic template for a website layout. So let's
do that now.
No comments: