Preview
Video Player
00:00
00:00
Introducing Flexbox
2:42Flexbox is a remarkable layout feature that's redefined how web designers build responsive layouts. With flexbox you can change the direction, size, and order of elements, like navigation links, content columns and images, regardless of their original size and order in the HTML. By the end of this course, you'll be able to build complex layouts in less time using flexbox.
[SOUND] Hey everyone, I'm Guil.
0:00
Thanks for joining me here in CSS Flexbox
Layout where you'll learn one of the most
0:06
advanced methods for laying out webpages.
0:10
CSS lab methods like floats,
0:13
in line block and absolute positioning
have certain limitations and were not
0:15
designed to handle the layout demands
of today's complex responsive websites.
0:19
Floats, for example,
weren't even intended for
0:24
page layout, they were really meant for
wrapping text around images.
0:26
As you learned in CSS Layout Basics,
0:31
floats can be problematic because
of their quirky behavior.
0:33
They require clear fixes to prevent
containing elements from collapsing.
0:36
And with inline block display
you're always fighting with
0:40
the default white space
created by the browser.
0:43
And positioning can be tricky in page
layout because it requires positioning
0:46
context and
0:49
other content on the page behaves as if
the positioned elements didn't even exist.
0:51
So, Flexbox, or Flexible Box Layout
0:56
is a set of CSS properties that proved
a flexible way to layout page content.
0:59
It's a remarkable layout feature that's
redefined how web designers build layouts.
1:04
You get the benefits of floats,
1:09
block, and inline block like stacking
elements and laying them out side by side
1:11
without any of the strange browser
behaviors that come with using them.
1:16
With Flexbox you can change the direction,
size and order or
1:20
elements, like navigation links,
content columns and
1:24
images, regardless of their original
size and order in the HTML.
1:27
And it gives you simple yet intelligent
tools for placing your content anywhere
1:31
from top to bottom, left to right,
center, and middle of a container.
1:36
No matter where they
appear in the source code.
1:40
You could even stretch and
shrink elements and distribute space.
1:42
[NOISE] For instance,
you can create three equal height columns,
1:46
regardless of which column is the tallest.
1:49
Then, lay them out on the same line by
aligning the first column to the left edge
1:52
of its container.
1:56
And the last column to the right edge,
1:57
while the second column sits
perfectly between the two.
1:59
You can evenly distribute
the space inside the container so
2:02
that the columns are of equal width.
2:06
Or you can grow the width of one column,
2:08
while automatically shrinking the width
of the two columns beside it.
2:10
And you can easily rearrange
the column order and
2:14
display them vertically on small screen
sizes without ever changing the markup.
2:16
So all this with just a few lines of CSS.
2:21
This makes building responsive
layouts that scale from small
2:25
mobile devices to large desktop
screens easier than ever.
2:28
So I'm excited to introduce
you to the powers of Flexbox.
2:32
By the end of this course you'll be able
to build complex layouts in less time
2:35
using Flexbox.
2:39