Learn CSS Flexbox in 20 Minutes (Course)

Summary

This script offers an in-depth exploration of CSS Flexbox, a powerful tool for creating responsive layouts. It explains the core concepts of flexbox, including the main and cross axes, alignment properties like 'justify-content' and 'align-items', and the use of 'flex-wrap' for responsive design. The tutorial also covers advanced features such as 'flex-grow', 'flex-shrink', and the application of minimum and maximum sizes for elements. It highlights the ease of centering elements and managing overflow with flexbox, providing practical examples and tips for web developers looking to enhance their layouts.

Takeaways

• 😎 Understanding Flexbox can significantly improve one's ability to create responsive layouts in CSS.
• 📐 To align elements within a flex container, it's essential to consider both the main and cross axes.
• 🔄 The 'justify-content' and 'align-items' properties are key for positioning elements along the main and cross axes respectively.
• 📊 The 'display: flex' property transforms the layout system, allowing for side-by-side positioning of elements.
• 🔄 'Flex-start', 'flex-end', and 'center' are basic values for aligning elements horizontally and vertically.
• 🌐 The 'flex-direction' property controls the direction of the main axis, which can be row, row-reverse, or column.
• 🔄 'Flex-wrap' allows for responsive layouts by wrapping items to the next line when necessary.
• 🔄 'Flex-grow' and 'flex-shrink' properties enable elements to grow or shrink responsively within the container.
• 📏 Minimum and maximum sizes can be combined with 'flex-grow' and 'flex-shrink' to define limits for resizing elements.
• 🔄 The 'align-self' property allows for individual alignment of flex items on the cross axis, different from the container's 'align-items'.
• 🌟 CSS Grid can sometimes achieve the same layout results with fewer lines of code, offering an alternative for complex layouts.

Q & A

What is the main benefit of using CSS Flexbox for layout design?

CSS Flexbox allows for the creation of responsive and flexible layouts with ease, enabling developers to align elements in various positions within a container and handle resizing behavior effectively.

How does understanding Flexbox improve one's approach to CSS coding?

Understanding Flexbox provides a superior grasp of layout dynamics in CSS, making developers more confident when dealing with common CSS problems such as centering elements or making a website responsive.

What is the initial step in creating a Flexbox layout?

The initial step is to define a reference point in HTML, which could be the body or a specific container, and then apply 'display: flex' to the parent element to initiate the Flexbox layout.

What are the two main axes in a Flexbox layout and why are they important?

The two main axes are the main axis and the cross axis. They are important because they control the flow and positioning of items within the Flexbox layout, determining how elements align and distribute space.

How can you horizontally center elements using Flexbox?

To horizontally center elements, apply 'display: flex' and 'justify-content: center' to the parent container.

What property is used to align elements vertically in a Flexbox layout?

The 'align-items' property is used to align elements vertically within a Flexbox layout.

What does the 'flex-direction' property do in Flexbox?

The 'flex-direction' property determines the direction of the main axis, which can be 'row' (default), 'row-reverse', 'column', or 'column-reverse', affecting the layout flow of the flex items.

How can you make a responsive layout that wraps elements to the next line when necessary?

Use the 'flex-wrap' property set to 'wrap' to create a responsive layout that allows elements to flow to the next line when there is not enough horizontal space.

What is the purpose of the 'flex-grow' property in Flexbox?

The 'flex-grow' property enables elements to grow and fill out available space within the parent container along the main axis, with higher values allowing elements to grow at a faster rate compared to others.

How can you prevent certain flex items from shrinking when the container size decreases?

Apply a 'flex-shrink' value of zero to specific flex items to prevent them from shrinking when the container size decreases.

What is the 'align-self' property used for in Flexbox?

The 'align-self' property is used to align a specific flex item differently from the alignment defined by 'align-items' on the cross axis, allowing for individual alignment control over flex items.

How can you create gaps between flex items?

The 'gap' property in Flexbox can be used to create consistent gaps between items. It can also be split into 'row-gap' and 'column-gap' for different horizontal and vertical spacing.

What is the recommended approach to center a div using CSS Grid compared to Flexbox?

In CSS Grid, you can center a div with even fewer lines of code by using 'display: grid' and 'place-content: center', which simplifies the process compared to the three lines required in Flexbox.

Outlines

00:00

🌟 Introduction to CSS Flexbox

This paragraph introduces the concept of CSS Flexbox as a solution to common layout issues such as overflowing elements and difficulty in creating responsive designs. The speaker shares their experience with Flexbox, emphasizing its transformative impact on their approach to CSS coding. The importance of understanding HTML as a foundation for Flexbox is highlighted, with the body or a specific container serving as the reference point for layout. The paragraph sets the stage for learning how to align elements within a parent element using Flexbox properties, starting with the 'display: flex' property and the axes concept, which includes the main axis and the cross axis. It also touches on the 'justify-content' and 'align-items' properties for horizontal and vertical alignment, and introduces the additional values these properties can take, such as 'space-between', 'space-around', and 'space-evenly', to create balanced gaps between elements.

05:02

🔄 Advanced Flexbox Techniques

The second paragraph delves deeper into advanced Flexbox techniques, starting with the 'flex-direction' property, which controls the direction of the main axis and affects how elements are laid out and aligned. The speaker explains how changing the 'flex-direction' from 'row' to 'row-reverse' or 'column' alters the alignment behavior of 'justify-content' and 'align-items'. The paragraph also covers the 'gap' property for creating space between items and the 'flex-wrap' property for making layouts responsive by allowing items to wrap onto the next line when necessary. The 'align-content' property is introduced for aligning lines of items within a flex container when wrapping occurs. The speaker emphasizes the flexibility of Flexbox in creating complex layouts with minimal code.

10:02

📏 Flexbox Sizing and Responsiveness

This paragraph focuses on the responsive sizing of elements within a Flexbox layout. The speaker discusses the 'flex-shrink' property, which controls how elements shrink when the container size is reduced, and demonstrates how to apply it to prevent certain elements from resizing. The 'flex-grow' property is introduced as a means to allow elements to grow and fill available space in the container. The paragraph explains how to apply different 'flex-grow' values to specific elements to control their growth behavior relative to others. The concept of using 'flex-grow' and 'flex-shrink' as multipliers is explored, along with the use of minimum and maximum sizes to define limits for resizing. The speaker also mentions the combination of these properties with media queries to create responsive designs that adapt to different screen sizes.

15:03

🎯 Fine-Tuning Flexbox Alignment

The fourth paragraph discusses fine-tuning the alignment of elements within a Flexbox layout. The 'align-self' property is introduced, allowing individual flex items to override the 'align-items' setting of the container. The speaker notes the limitation of 'align-self' to the cross-axis and the absence of a corresponding property for the main axis, suggesting the use of traditional CSS techniques like 'margin-right: auto' for certain layout scenarios. The paragraph also summarizes key takeaways from the discussion on Flexbox, emphasizing the ability to position elements anywhere within a container by considering the main and cross axes, wrapping elements with 'flex-wrap', and resizing elements with 'flex-grow' and 'flex-shrink'. The speaker teases the introduction of CSS Grid as a potentially more straightforward approach for certain layout tasks.

20:04

🚀 CSS Grid: Simplifying Layouts

In the final paragraph, the speaker introduces CSS Grid as an alternative to Flexbox for creating layouts, suggesting that it can simplify the process and reduce the amount of code needed. The paragraph contrasts the three-line approach of Flexbox for centering a div with the two-line method using CSS Grid, highlighting the efficiency of Grid for certain tasks. The speaker promotes their HTML and CSS complete course for learning both Flexbox and Grid through practical projects. The paragraph concludes with a call to action for viewers to learn more about web development and CSS layouts by following the provided link in the video description.

Keywords

💡Flexbox

Flexbox is a layout model in CSS that allows for the arrangement of elements in a flexible and responsive manner. It is central to the video's theme, as it is the main subject being discussed. The script explains how Flexbox can be used to create responsive layouts and solve common CSS problems, such as centering a div, with just a few lines of code. Examples from the script include using 'display: flex' to enable Flexbox and aligning elements using 'justify-content' and 'align-items'.

💡Responsive Layouts

Responsive layouts refer to web design approaches that ensure web pages render well on different devices and window or screen sizes. The video emphasizes the importance of responsive layouts and how Flexbox can facilitate their creation. The script mentions that with Flexbox, developers can easily make a website responsive by adjusting elements' sizes and positions dynamically based on the container's size.

💡Centering Elements

Centering elements is a common design task in web development, and the script discusses how Flexbox simplifies this process. The video shows that by using 'display: flex' along with 'justify-content: center' and 'align-items: center', elements can be centered both horizontally and vertically within their parent container. This is a key example used to demonstrate the power and ease of use of Flexbox.

💡Main Axis

In Flexbox, the main axis is the primary direction in which flex items are laid out. The script explains that understanding the main axis is crucial for aligning and distributing space among items within a flex container. The main axis is controlled by properties like 'justify-content', which can have values such as 'flex-start', 'flex-end', or 'center', as illustrated in the script when discussing the alignment of boxes.

💡Cross Axis

The cross axis in Flexbox is perpendicular to the main axis and is used to align items on the axis that runs across the flex container. The script mentions that the cross axis is important for vertical alignment and is controlled by the 'align-items' property, which can also have values like 'flex-start', 'flex-end', or 'center', as used to center elements vertically in the video.

💡Justify Content

The 'justify-content' property in Flexbox is used to align items along the main axis of a flex container. The video script provides examples of its use, such as 'justify-content: center' to center items horizontally. It is a fundamental concept in achieving various alignments within a flex layout.

💡Align Items

The 'align-items' property in Flexbox is used to align items along the cross axis of a flex container. The script discusses how this property, with values like 'flex-start', 'flex-end', or 'center', can be used to achieve vertical alignment of items. It is a key concept in the video for centering elements within a flex container.

💡Flex Direction

The 'flex-direction' property in Flexbox defines the direction of the main axis, which can be 'row', 'row-reverse', 'column', or 'column-reverse'. The script explains how changing this property affects the layout of flex items, allowing for different orientations such as left-to-right or top-to-bottom arrangements.

💡Flex Wrap

The 'flex-wrap' property in Flexbox controls whether the flex items are forced into a single line or allowed to wrap onto additional lines. The script mentions 'flex-wrap: wrap' as a way to create a responsive layout that adjusts to the container's size by allowing items to flow to the next line when necessary.

💡Gap

The 'gap' property in Flexbox creates space between items within a flex container. The script discusses how this property simplifies the creation of space between items without the need for manual margin adjustments. It is an example of how Flexbox can streamline layout design.

💡Flex Grow

The 'flex-grow' property in Flexbox allows flex items to grow and fill up any available space along the main axis. The script explains how enabling 'flex-grow' causes items to expand and fill the container, which is useful for creating flexible and responsive designs. It also mentions that 'flex-grow' can have different values for different items, allowing for control over how much space each item occupies.

💡Flex Shrink

The 'flex-shrink' property in Flexbox controls how flex items shrink when there isn't enough space in the container. The script discusses how 'flex-shrink' can be used to prevent items from resizing or to allow them to shrink proportionally, which is important for maintaining layout integrity when space is limited.

💡Align Self

The 'align-self' property in Flexbox is used to align a specific item on the cross axis, independent of the 'align-items' setting for the flex container. The script mentions that 'align-self' can be used to override the default alignment for individual items, providing an example where the first box is aligned differently from the others.

💡CSS Grid

CSS Grid is another layout system in CSS that is mentioned towards the end of the script as an alternative or complement to Flexbox for creating complex layouts. The video script suggests that while Flexbox is powerful, CSS Grid can offer even more control and simplicity in certain layout scenarios.

Highlights

Introduction to the power of CSS Flexbox for creating responsive layouts.

The transformative effect of understanding Flexbox on CSS coding practices.

Starting with HTML to define a reference point for layout.

Using 'display: flex' to enable Flexbox and change element positioning.

Explanation of the main and cross axes in Flexbox layout.

How to align elements using 'justify-content' and 'align-items' properties.

Centering elements horizontally and vertically with Flexbox.

The concept of 'flex-direction' and its impact on main axis direction.

Using 'flex-wrap' for responsive layouts that wrap elements to the next line.

Introduction of 'align-content' for aligning lines of wrapped elements.

The 'gap' property to create space between flex items.

Flexbox's ability to resize elements responsively using 'flex-shrink'.

The 'flex-grow' property to make elements grow and fill available space.

Combining 'flex-grow' and 'flex-shrink' with minimum and maximum sizes for control.

The 'align-self' property for individually aligning flex items on the cross axis.

Using Flexbox for complex layouts and responsive design with 'flex-wrap' and media queries.

Comparison between Flexbox and Grid layouts for centering elements with fewer lines of code.

Summary of key takeaways from Flexbox for positioning, wrapping, and resizing elements.

Invitation to learn more about CSS Grid and advanced layouts in the complete course.

Transcripts

have you ever struggled with overflowing

elements or weird resizing behavior in

CSS and you just want to be able to

create these awesome responsive layouts

well then let me tell you today I have

something really really special for you

I did some research to find out what is

the best piece of information we can

teach you in CSS and here it is a

complete CSS flexbox

[Music]

course I know from experience that

understanding flexbox will get you to a

level of superior understanding of how

things work in CSS when I first heard

about it years ago it completely changed

the way I approach coding in CSS it will

enable you to create beautiful and

responsive layouts in any imaginable way

you're going to feel so much more

confident When approaching typical CSS

problems like how to center a div or how

can I make my website responsive with

just a few lines of code it all starts

with HTML where you have to define a

reference point this could be the body

or a specific container that you use for

your layout every HTML element that

holds any type of content can be a flex

boox or GD container our first goal is

finding out how to align elements

anywhere inside its parent element at

the top bottom left right center and

every combination in between so we are

going to answer the most popular

beginner question how to center a diff

in HTML we have these five diff

container boxes they have some very

basic Styles in CSS to align your boxes

with a flex boox layout you need to

address the parent element so we address

the body and apply display

Flex notice how this immediately changed

the way the the boxes are positioned

they used to be one below the other and

now they are side by side the display

property is a very important CSS

property most elements have a display of

block or inline per default block

elements take up the entire width of the

screen this results in elements being

forced to the next line when we apply

display Flex we leave this system behind

and enter a new world here things work

differently let's add a little border so

that we can see the frame of our flexbox

layout the most important Concept in

flexbox are the axes along which items

are positioned the main axis and the

cross axis they control the flow of our

flexbox layout to position your elements

you have to keep both of these axes in

mind don't worry I will keep showing

them every once in a while to position

your elements anywhere along the main

axis you need the justify content

property this property has three basic

values Flex start is at the start of the

main axis this is the default value

which is why our boxes are here at the

left side of our screen

Flex end is at the end of the main axis

this will align the boxes on the right

side and Center is at the center of the

main axis so you can use these two lines

of code display flex and justify content

Center to Center your elements

horizontally by the way this video is a

free sample of our HTML and CSS complete

course so if you like the way we teach

and you want to learn more about web

development then get the full course

right now now let's see how we can align

elements vertically

in this case we need to consider the

cross axis to do this let's increase the

size of the flexbox layout by applying a

Min height of 800 pixels in the body now

we can see that this black border is

basically the frame of our flexbox

layout to Center your elements on the

cross axis we use the Align items

property this property can have the same

values as justify content so you have

Flex start for top positioning meaning

at the start of the Cross

axis X end for bottom positioning now

they are down here and of course Center

to put them in the

center and now we have finally answered

how to center a div you just need these

three lines of code to Center elements

along the main and cross axis since

flexbox is flexible this layout will

work even if we change the size of the

layout the boxes will always be in the

center no matter if we change the height

and width of the body but justify

content and align items can have three

additional and more complex values space

between space around and space evenly

space between will distribute the

elements from left to right the first

and last element will touch the edge of

the layout depending on how big the

container is the elements will have a

bigger Gap in

between space around Works similarly but

here the first and last element do not

touch the edge instead every element

gets some space to the left and right as

you can see even when I resize the

entire website the spacing between the

elements adjusts

automatically but here we run into a

slight inconsistency that just triggers

my OCD since the right space of the Box

adds up with the left space of the

second box it will result in these

spaces being twice as big as the spaces

that we have to the edges if you don't

want that you can use space evenly here

all the spaces are the same size and now

finally the gaps are perfectly balanced

as all things should be and of course

all of these values are completely

flexible they adjust perfectly when the

size of the container changes and that's

the whole point of using Flex boox

theoretically you could achieve the same

thing centering a div and positioning

your elements using only margins and

padding but they are just not as

flexible as a flexbox layout by the way

you can use the same values on the Align

items property as well but in this case

it wouldn't make sense since we only

have one row of content the boxes will

all just be at the start of the Cross

AIS but it is possible to use these

values on the cross axis as you will

learn later once the layouts get more

complex for now let's learn about

another interesting flexbox property

which is flex direction to understand it

easier let's remove align items and just

use justify content Flex start for now

the flex Direction property controls the

direction of the main axis its default

value is row which makes the main axis

go from left to right you could also use

row reverse to make it go from right to

left looking at the numbers we can see

that it starts counting from the right

but this property also changed the way

our justifi content value works now as

the main axis goes from right to left

the value Flex start is on the right

side and flex end is on the left

side you can also make the main axis go

from top to bottom by applying Flex

Direction

column now the elements are no longer

side by side but instead on top of each

other since the direction of the main

axis changed the direction of the Cross

ax has changed as well now if you want

to Center these boxes horizontally you

no longer use Justified content but

instead align items since justify

content aligns the elements on the main

axis which goes from top to bottom it

doesn't make sense now to use it we need

to use align items Center to Center them

on the cross axis so I hope you

understand that it is really important

to remember the flex direction of your

layout as this completely changes the

way all the other properties work per

default flexbox uses a Flex Direction

row this will align the elements side by

side but you're also going to want to

change it to flex Direction column when

you want your elements to be aligned

vertically here is a very common use

case scenario you want your entire

website to stay the same everything is

aligned vertically but you also want to

Center everything horizontally then you

would go to the body and apply display

Flex Flex Direction

column and and align items

Center and with that every element will

automatically be centered

horizontally all right let's get back to

our starting point display Flex there

are a few more simple flexbox properties

before it gets complicated the Gap

property will create a gap between our

items this property is very simple and

you no longer need to use margins inside

a flexbox layout for example let's give

our boxes a gap of 20 pixels and as we

can see now every box has a nice little

Gap in

between the flex wrap property can make

your flexbox layout responsive using

only one line of code you either have

wrap or no wrap if you use flex wrap you

will get a responsive layout that will

align your items on the next line if we

don't have enough space resizing the

window will show how the elements flow

to the next line when necessary if you

use flex wrap no wrap that will not

happen and instead the boxes will shrink

together

using a flex wrap of wrap will make the

elements flow to the next

line if we want this layout to be

centered using justify content Center

and align item Center we end up with

this layout while the gap between the

first line and the second line is so big

will become clear once we have a few

more boxes so let's say we have nine

boxes in

HTML just add a few boxes and number

them

properly then the flex box layout will

have more line braks when when we use

flx wrap the issue that we are running

into is that we no longer have one main

axis and one cross axis but every line

has its own Main and cross axis in this

case we have three of them the Align

items property will only control the

alignment along each individual cross

axis Flex start puts the boxes at the

start of each cross

axis Flex end at the

end and Center in the

center but now we also need another CSS

property to control the alignment of all

the lines together for that we use align

content align content has a default

value of space around and this is why

the gaps between the lines are so

big we can also apply space between or

space evenly to change

that and of course we can also use the

basic values Flex start Flex end and

Center so the difference between align

content and align items is align items

will control the alignment along the

cross axis of every flexbox line

individually and align content will

control the alignment of all lines

together ultimately the perfectly

centered layout in flexbox is when you

Center all three of these properties and

wrap the elements automatically when

necessary justify content Center align

item Center and align content Center by

the way when we have a layout like this

where are horizontal gaps and vertical

gaps then you can actually split the Gap

property into two different properties

row Gap and column Gap you can use these

to apply different values for the

horizontal and vertical gaps let's say

column Gap is 10 pixels and row Gap is

20 pixels this way we applied different

values for the horizontal and vertical

gaps but most likely you will not need

that and just use the normal Gap

property to control both at the same

time these properties are not so

important on flexbox but they will

become interesting when you have more

complex layouts in Grid later in the

course by now you should have a good

understanding of alignment and flexbox

using these flexbox properties and their

different combinations of values you can

create any alignment possibility you

want and of course if you don't know by

now you can also use flexbox in every

other HTML element as well it does not

have to be the body for example a little

thinking exercise for beginners if we

want to Center the numbers inside the

boxes which are currently at the top

left corner how would you do that how

can you Center the numbers inside the

boxes pause the video and try it out

yourself

the answer is pretty straightforward we

do the same thing as earlier but now

Inside the Box selector display Flex to

enable flexbox justify content center

for the main axis and align item center

for the cross AIS and this way we

centered the numbers inside the

boxes obviously you can use all the

different combinations we talked about

with black star and flex and here as

well now let's move on to something very

powerful in flexbox you don't always

have to wrap elements in Flex box you

can also resize them responsively so our

next goal is this layout where the boxes

grow and drink

responsively to do that let's go back to

our layout of five boxes in HTML so

remove a few boxes so that we have five

boxes again in CSS we remove any Flex

box properties except display flex and

gap of 10 pixels this is as simple as it

gets now since we have no flex rep

applied the boxes will be resized

automatically if the viewport gets too

small this Behavior can be specified

using Flex shrink and interestingly this

is something that you apply on the flex

items not on the flex container inside

the boxes we can apply a flex rink of

zero for example this will prevent the

shrinking of the boxes they can no

longer be resized and will overflow the

container this is also the case for

every non-flex box layout when you have

the problem of overflowing elements like

this then consider using Flex box to

either wrap the elements to with the

next line or enable flexx rink with a

value of one to make them shrink

automatically but remember Flex rink of

one is the default value you can imagine

this property like a switch that you can

turn on and off now when we have Flex

rink applied we can see how the boxes

resize automatically currently we are

addressing every box the same way using

their class so every box has the same

Flex rink value but you can also use

different Flex rink values on each item

so in HTML I give the first box an ID

box one I want to style this one

differently when I address this box in

CSS I could give this box a flex ring of

zero for example and the other ones

still have a flex ring of

one this will result in this Behavior

every element rings when necessary

except the first one it will stay the

same you could use this intentionally if

you don't want specific elements to

shrink for example if you don't want to

distort an image or icon then it is

pretty useful to disable Flex ring on

that element now Flex rink is pretty

useful but actually what I use way more

often is its counterpart Flex grow Flex

grow enables elements to grow meaning to

stretch along the main axis its default

value is zero so elements do not grow

per default but once you enable it Flex

grow one all the flex items try to fill

out the empty space inside their parent

element this means if there's more empty

space the elements will be bigger they

grow Flex grow tries to fill out all the

available space inside the parent

element and of course you can address

specific elements and apply a different

grow behavior let's say for the boxes

the flex grow is zero so they cannot

grow but box number one can

grow and as you can see we end up with

this effect where only the first element

will grow I used this exact behavior

when I developed the to-do application

here the to-do text grows as much as

possible while the checkbox the delete

button and all the other elements should

not be able to grow this is is a very

useful technique to resize specific

elements depending on the screen size so

you will use it very often when making a

website responsive Flex grow and flex

rink are not only a Boolean that you can

turn on and off but they also work as a

multiplier you can assign even higher

numbers than one they only Mak sense if

they are compared with each other for

example let's give the boxes a flex grow

of one and the first box a flex grow of

five now every element has the ability

to grow but the first one does it five

times faster this El element will be

bigger than the others but every element

can potentially grow so you can

basically apply different grow values to

control how much of the empty space they

should fill this does not mean that this

box is five times bigger as we can see

per default they are all the same size

but only when there's new empty space to

fill out then this element will Reserve

five times more of that new space than

the other elements and the same thing

can be done for Flex shrink now the

first box shrinks five times faster than

the other

and of course you can address every

element on its own and apply a different

value for Flex grow and flex rank but I

never had a situation where this

specific feature was being used since

most times you just want to turn on and

off the grow and Shrink ability for the

elements in a balanced way where they

all behave the same way this whole

system of flex grow and flex rink

becomes even more powerful when you

combine it with minimum and maximum

sizes such as minwidth and Max width

because then you can Define where the

flex rink and flex grow should stop

you can say my boxes should be able to

grow Flex grow of one but they should

not become bigger than 300 pixels each

Max with 300

pixels now the elements grow grow grow

grow grow up to the point where they

reach the maximum size and the same for

Flex shrink they can shrink but only

until they reach a minimum width of

let's say 100

pixels this will make them shrink in the

browser as expected but once they reach

that size of 100 pixels the elements

will overflow

and of course overflowing elements is

something that you should avoid but

sometimes your elements should not get

any smaller and need a minimum width to

solve the overflowing problem remember

that earlier we talked about Flex wrap

we can't combine Flex rink and flex wrap

by just using a media query normally we

use flex rink and flex wrap is disabled

with no wrap but once the screen size

gets too small and the minwidth causes

the element to overflow then we apply a

flex wrap of wrap and the element wraps

to the next line and this is a beautiful

example of how easy it can be to make

your website responsive you just use

flex shrink and once you don't want it

to shrink anymore then you use a flex

wrap a special feature of flexbox that I

don't really see that often being used

is the Align self property this property

works just as align items but you use it

on the flex items that means let's say

we have an align items of flex start and

for some reason we want to isolate the

first box and apply something else that

is not Flex start a line self of flex

end for example this will position only

the first box at Flex end and everything

else stays Flex start of course Center

is also possible so you can use this

property to align self one item

differently on the cross axis but

unfortunately I have not found a similar

flexbox property for the main axis let's

say we have a general Justified content

of flex m and we want the first item to

be Flex start it's only logical to

assume that the property justify self

works the same for the main axis but

unfortunately it doesn't since justify

self is actually a property that you use

in CSS grid as you are going to learn

later in the course if you want to

achieve the desired layout where only

the first element is on the left side

and every other element is on the right

then you would use the old school

solution of margin right Auto this is a

very useful technique for navigation

bars here you want your company logo on

the left side and everything else on the

right side so just use margin right Auto

now we already know a lot about CSS

flexbox layouts but before we dive into

grid layouts let's summarize the key

takeaways of flexbox you can position

everything anywhere inside a flex

container if you consider the main and

cross axis and their properties justify

content and align items you can wrap

elements to the next line using Flex

wrap of wrap you can also resize

elements using Flex grow and flex rink

and apply different values for each

element if that is what you want

combining all of that with minimum and

maximum sizes and media queries you can

already achieve most layouts that you

have in mind but if you want to create

more complex layouts or you just want to

simplify your code then let me introduce

CSS grid because there are actually

things that are easier in Grid and work

with even fewer lines of code here is a

common situation how to Cent a div an

experienced flexbox guy would say just

use display Flex justify content Center

and Aline items Center and that's fine

but a grid layout guy would say hold on

three lines of code I can do it in two

display grid Place content center now if

you want to learn CSS Grid in flexbox in

a practical way by building Advanced

projects like this learning page that

uses modern flexbox and grid sections

then I strongly recommend that you get

our HTML and CSS complete course using

the first link in the video description

my name is Fabian and this was coding to

go the channel where you the most

relevant coding Concept in just a few

minutes