Learn Flexbox CSS in 8 minutes
Summary
TLDRThe video script introduces the evolution of CSS layouts from floats and positioning to the transformative introduction of flexbox. It explains the basics of flexbox, including setting up a container and children in HTML, and using CSS to define the display as flex. The script covers the creation of invisible axes, alignment of items along the main and cross axes using justify-content and align-items, and the default horizontal orientation of the main axis. It also delves into altering the main axis with flex-direction, wrapping items with flex-wrap, and adding gaps with the gap property. The video further explores individual item properties like flex-grow, flex-shrink, flex-basis, align-self, and order, offering a comprehensive guide to mastering flexbox for web developers.
Takeaways
- 🌟 Introduction of flexbox revolutionized CSS layouts, providing an alternative to floats and positioning.
- 📦 To use flexbox, a container with a `display: flex` property is needed, along with child items in the HTML structure.
- 🔄 The default main axis is horizontal, but it can be set to vertical with the `flex-direction` property.
- 🕒 The `justify-content` property aligns items along the main axis, with options like `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.
- 🔄 The `align-items` property aligns items along the cross axis, with options such as `flex-start`, `flex-end`, `center`, and `baseline`.
- 🔄 Understanding the main and cross axes is crucial for flexbox; items are laid out along the main axis and the cross axis is perpendicular to it.
- 🔄 The `flex-wrap` property allows items to wrap into multiple lines when there's not enough space, with options like `nowrap`, `wrap`, and `wrap-reverse`.
- 🔄 The `align-content` property aligns a flex container's lines along the cross axis, applicable when `flex-wrap` is set to `wrap`.
- 🌱 The `flex-grow` property allows items to grow and fill available space, taking a unitless value that represents a proportion.
- 📉 The `flex-shrink` property defines how an item shrinks relative to others, also taking a unitless value.
- 📏 The `flex-basis` property sets the initial size of an item before space distribution, which can be overwritten by other flex properties.
Q & A
What was the primary method for creating layouts before the introduction of flexbox?
-Before flexbox, developers primarily used floats and positioning for creating layouts.
What is the first step in using flexbox?
-The first step in using flexbox is to define a container with children in the HTML and then set the container's display property to 'flex' in CSS.
What are the two invisible axes created by a flex container?
-The two invisible axes created by a flex container are the main axis and the cross axis.
How can you change the orientation of the main axis with flexbox?
-You can change the orientation of the main axis with the 'flex-direction' property, setting it to 'column' for a vertical axis or 'row' for a horizontal axis.
What is the default value of the 'justify-content' property in flexbox?
-The default value of the 'justify-content' property is 'flex-start', which aligns items at the start of the main axis.
How does the 'align-items' property affect items in a flex container?
-The 'align-items' property aligns items along the cross axis. It can be set to 'flex-start', 'flex-end', 'center', 'baseline', or 'stretch'.
What happens when you set the 'flex-wrap' property to 'wrap'?
-When 'flex-wrap' is set to 'wrap', items are allowed to wrap onto multiple lines when there's not enough space on the main axis.
What is the purpose of the 'align-content' property in flexbox?
-The 'align-content' property aligns a flex container's lines along the cross axis when 'flex-wrap' is set to 'wrap' and there are multiple lines of items.
How does the 'flex-grow' property affect the size of flex items?
-The 'flex-grow' property determines how much an item can grow relative to the rest of the items in the container when there is extra space on the main axis.
What does the 'flex-basis' property do in flexbox?
-The 'flex-basis' property sets the initial size of a flex item before any remaining space is distributed according to 'flex-grow' and 'flex-shrink'.
What is the 'order' property in flexbox used for?
-The 'order' property changes the order in which flex items appear in the container, regardless of their order in the HTML.
Outlines
🌟 Introduction to Flexbox and Basic Properties
This paragraph introduces the concept of Flexbox as a layout model in CSS, highlighting its transformative impact on web development. It explains the need for a container and children in HTML to utilize Flexbox, and how setting the container's display to 'flex' creates an invisible main and cross axis for item positioning. The paragraph details the use of 'flex-direction' to control the orientation of the main axis, defaulting to 'row' (horizontal), and how 'justify-content' aligns items along the main axis with options like 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', and 'space-evenly'. It also covers 'align-items' for cross-axis alignment with 'flex-start', 'flex-end', 'center', and 'baseline', emphasizing the importance of understanding the direction of the main and cross axes in Flexbox.
🔄 Flexbox Wrapping and Advanced Alignment
The second paragraph delves into the 'flex-wrap' property, which controls whether items wrap onto multiple lines when there's insufficient space on a single line. It explains the default 'nowrap' setting and how changing it to 'wrap' allows for multi-line layouts. Introducing the 'align-content' property, the paragraph describes its role in aligning items on the cross-axis when wrapping is enabled, with similar options to 'justify-content'. The discussion continues with the 'gap' property, which adds space between items, and an overview of other flexbox properties that apply to the children of the container, such as 'flex-grow', 'flex-shrink', 'flex-basis', and the shorthand 'flex'. The paragraph concludes with a brief mention of 'align-self' and 'order', which allow for individual control over items' alignment and order of appearance, respectively.
Mindmap
Keywords
💡Flexbox
💡Container
💡Main Axis
💡Cross Axis
💡Justify Content
💡Align Items
💡Flex Direction
💡Flex Wrap
💡Align Content
💡Gap
💡Flex Grow
💡Flex Shrink
Highlights
CSS Stone Age developers used floats and positioning for layouts.
Flexbox introduced a revolutionary way to create layouts.
To use flexbox, you need a container with children in HTML.
Setting the container's display to 'flex' creates two invisible axes: main and cross.
The default main axis is horizontal; use 'flex-direction: row' to maintain this.
The 'justify-content' property aligns items along the main axis.
Items can be aligned on the cross axis using the 'align-items' property.
The 'flex-direction' set to 'column' makes the main axis vertical.
Flex items try to fit into one line by default, but 'flex-wrap: wrap' allows them to wrap.
The 'align-content' property aligns items on the cross axis when 'flex-wrap' is set to 'wrap'.
The 'gap' property adds space between flex items.
The 'flex-grow' property allows an item to grow if there's enough space.
The 'flex-shrink' property defines how fast an item shrinks compared to others.
The 'flex-basis' property defines the size of an item before space distribution.
The shorthand 'flex' combines 'flex-grow', 'flex-shrink', and 'flex-basis'.
The 'align-self' property overrides 'align-items' for individual items.
The 'order' property changes the order of items as they appear.
Using 'order' should be avoided unless absolutely necessary due to its impact on semantics and accessibility.
Transcripts
during the CSS Stone Age developers were
creating layouts with floats and
positioning until one fateful day
flexbox would be introduced and the
world would never be the same
to use flexbox first we need a container
and some children in our HTML
then in our CSS we can go straight to
the bottom of the file ignoring all of
the base tiles and give the container
the display of flex this created two
invisible axes a main axis and a cross
axis our items are no longer stacked on
top of one another because display Flex
is positioning our items on the main
axis and by default the main axis is
horizontal if we want we can change the
main axis to be vertical with the flex
Direction property
if we set the flex direction to column
the main axis will be vertical but if we
set it to row the main axis will be
horizontal we actually want our main
axis to be horizontal so we set Flex
direction to row or we could remove it
entirely because Flex direction is set
to row by default now knowing the
direction of our main axis we can align
our items along the main axis with the
justify content property the default is
flex start see nothing happened but if
we set it to flex end our items will be
pushed to the end of the line
Center will Center our items in the
middle space between will evenly
distribute the items at between the
first and the last item space around is
similar to space between but now the
edges also have some spacing to them and
finally space evenly will evenly
distribute space in between all the
items
justify content is for aligning items on
the main axis but we can also align
items along the cross axis with the
Align items properly
Flex start places items at the start of
the Cross axis flex and places items at
the end of the Cross Axis Center will
Center our items in the middle of the
Cross axis and Baseline will align items
so that the Baseline text of each item
is aligned you can see this more clearly
when I increase the size of some items
the font size on the first item is now
larger than the second but with a line
item set to Baseline the Baseline of
both text are aligned now just to
clarify because this is important
justify content is aligning items on the
main axis and align items is aligning
items on the cross axis if we don't
Define a flex Direction on the container
then Flex direction is set to row by
default which also means that the main
axis is set to horizontal by default
left to right and that the cross axis is
set to Vertical by default top to bottom
we can switch them so that the main axis
becomes vertical instead of horizontal
by defining a flex direction of column
when the flex direction is set to column
justify content will still align items
on the main axis but now that we defined
the flex direction to be column the main
axis is now vertical this is the key to
understanding flexbox
by default Flex items will all try to
fit into one line when I add more items
to The Container the items will start
crushing each other to fix this we can
make our items wrap with the flex drop
property by default this is set to no
wrap but we can set it to wrap and now
our items are no longer trying to fit
into one line but instead are allowed to
wrap when there's no more space
available
when we have Flex drop set to wrap a new
property is unlocked the Align content
property not to be confused with align
items align content property only works
when we have Flex wrap set to wrap and
have items wrapping this property allows
us to align everything on the cross axis
the possible values that go here are
pretty much the same as with the
Justified content so flex and Center
space between space around space evenly
and flex start
you can also add gaps in between items
currently all our items are touching
each other we can use the Gap property
on the container to add gaps in between
each item like this
all the flexbox properties I've shown
you so far belong inside the container
but there's also a few other flexbox
properties that belong in the direct
Children of the container
flexgro is one of them but before I get
into it in the HTML I'm going to remove
most of the items and leave just the
first three then back in our CSS we can
remove the flex wrap and the Align
content because we don't need them
anymore then under our container we can
select the third item by its class name
item three and give it the flex grow of
One Flex grow takes a unitless value
that serves as a proportion and what it
does is allows the item to grow if
there's enough space for it to do so
we see our third item grew to fill out
the remaining space the same will happen
if instead I apply this rule on either
the first or second item if they all
have Flex growth set to 1 then the
remaining space will be distributed
equally to all children
next is flex shrink Flex shrink also
takes a unitless value this property
though defines how fast one item shrinks
in comparison to the others if I set
item 1 to have a flex shrink of 5 for
example the item 1 will shrink much
faster than the other items if I don't
want an item to shrink at all I can set
it to flex zero now the item is refusing
to shrink
Flex bases defines the size of an item
before the remaining space is
distributed basically if your item
already has a size like a width but you
want to overwrite that size with
something else then you use flex spaces
for example my item has a width of 150
pixels I can overwrite that by setting
the flex basis to something else like
300 pixels now my item has a width of
200 pixels if you set it to zero you're
basically shrinking it to the max
personally I almost never accept any few
Niche exceptions use either the flex
growth Flex shrink and flex bases but
instead I use the shorthand called Flex
Flex is the shorthand for the flex
growth like shrink and flex spaces
combined but the second and third
parameters are optional
when you set Flex to only have one value
like Flex 1 the other two optional
values are set automatically and
intelligently for you
another item property is the Align self
this one will overwrite the value you
set in the Align item on the container
but for an individual item so for
example if I have a line item set to
flex start on the container but want the
first item to be aligned Center on the
cross axis I can use the Align self
property to overwrite what I defined in
the container and have this individual
item be placed at the center
other than Center you can also have Flex
start Flex end and Baseline as possible
values
the last property is the order property
by default our items are laid out in the
order of our HTML item 1 item 2 and item
3. however we can use this property to
change the order in which items appear
say if I want the last item to appear
first I can give it the order property
and set it to -1
minus 1 because the default value of
this property is zero this means that
all our items have an order set to 0 by
default so for us to have the third item
appear first I need to set it to -1
if I want the first item to appear last
then I give it the order of 1. this
property by the way really shouldn't be
something you use unless you absolutely
have to because it messes with the
semantics and the accessibility of your
HTML
if you enjoyed the video or learned
something please consider leaving a like
and booping the Subscribe button thanks
for watching
Ver Más Videos Relacionados
CSS Course | Flexbox in CSS in One Video | Easy Tutorial | Complete Web Development Tutorial 24
Learn CSS flexbox in 10 minutes! 💪
Learn CSS Flexbox in 20 Minutes (Course)
Flexbox Tutorial - 6 - Flex wrap
Cómo Centrar tus Elementos HTML Fácilmente
CSS Grid Layout In One Video | Complete Web Development Course #26
5.0 / 5 (0 votes)