hello everybody in this video we're

going to dive into the different parts

of flexbox starting with what flexbox is

and how flexbox works and then we're

going to dive into the different

properties that we can apply to flexbox

in order to layout in style our

elements as we want so to get started

15sec

let's add a div inside of our body here

we'll give it a class of flexbox

container since this will be the

container that all our flexbox

items will reside inside then inside of

this container we'll add another div

give it a class and we'll call this one

flexbox item and we'll also give it a

class of flexbox item one I will we know

which item we're referring to when we

styled it individually if you save that

you'll see that we have a gray box show

up on the right here and that's because

I've already applied some styles to

these flexbox items so that we can

distinguish them and see them now let's

copy this and add in two more flex box

items and save

53second
 that and you'll see that

we have now three flux box items instead

of our flexbox container but we don't

have any styling to actually make this a

Flex container so to get started with

creating a Flex container what's going

to our Styles here we have our flex box

container selector and we can just say

display and set it to flex and this is

how we create a Fox box container now if

I save that you'll see that all of our

items are now the same height and they

all show up in one row you'll also

notice that if I shrink our browser

you'll see that these items will scale

their size to fit within the browser and

as I make it wide enough for them to all

fit you'll just show up on the left side

of the screen and this is really the

main thing that flex box has going for

it it allows you to style the

flexibility and sizing of different

elements in the container from the

actual container selector here this

flexbox container without ever having to

style the actual flex box items so

inside of the container for flex box you

can do things such as laying out your

different elements across the different

rows and columns as well as aligning

them inside of that layout and then the

items themselves you can specify how you

want them to flexibly grow inside of the

container or how you want them to shrink

inside of the container to make this

easier to see I've created some

background styles here and if we save

this you'll see that we now have our

fluxbox container which is this yellow

background item and then are different

fluxbox items with their

embers in the corner as these grayish

colored with a border that is a little

bit darker gray this way we can see when

we shrink our browser you can see that

these items shrink together and as we

increase it they'll grow again now

before we get started with actually

laying out and styling a different

elements inside of our container we

first need to understand the concept of

the main axis and the cross axis inside

of a flexbox container I have these

styles here that will show us the main

access and cross access for our flexbox

container and as you can see this main

access goes horizontally across the

entire flexbox container while the cross

access goes vertically this is because

our flexbox container is laid out in a

row as opposed to a column fluxbox gives

us a property on the container called

the Flex direction where we can set if

we want our flex box to be a row or

column based layout and depending on

this these main axis and cross access

will actually flip so in a column based

layout the cross access will go

horizontally and the main axis will go

vertically all you really need to

remember is that this main axis will go

the same direction as your layout so in

a row layout

it'll be horizontal and a column layout

it'll be vertical and in order to style

the layout of these elements you style

them based on the axis this so the main

axis or the cross axis and not based on

vertical or horizontal so if we wanted

to style our elements on the main axis

we would use the justified content

property inside of our flexbox container

right now our main axis has a flex start

attribute applied to which means that

all the elements will align at the start

of the main axis if for example we

wanted to Center these items inside of

this main axis we would change this from

flex start to center and if you say that

you see that now all of our fluxbox

items are in the center of our container

another thing that we can do is if we

wanted to layout our elements with space

between them we could use the space

between property here and now all the

extra space inside of our Flex container

will be put evenly between all the

different items inside of our container

and if we wanted to have space on the

outside of our container as well we

could use space around which puts an

even amount of space on all sides of the

Flex items and not just in between them

this makes laying out items in a

horizontal manner very easy inside of

flux box

due to this justify content property but

if we wanted to for example lay out

things on this cross access we would use

the align items property and right now

the default for this is stretch which

means our items will stretch to fill the

most amount of space vertically that

they can that's why some of our items

that were smaller grew to full size if

we wanted to keep the size of our items

we would use flex start and then all of

our items would align themselves at the

very top of our flexbox container based

on this cross axis we could also use

Center here in order to Center them

vertically which is one of the most

important things that you can do with

Flex box before flexbox aligning items

vertically inside of a container was

nearly impossible both fluxbox is as

easy as one line of CSS and it will

perfectly align all of your items inside

of this container the last way to align

our items inside of our flexbox

container is to use the align content

property and this property is only for

using on multi-line fluxbox containers

but as you saw when we shrink our

browser size these items just shrink to

take up the amount of space needed but

if we change our flex box here to use

the Flex wrap property and tell it to

wrap you'll see that our items will wrap

on two different lines instead of

shrinking their size as you can see here

and this aligned content property tells

it how much space to put between lines

for example if we use flex start all of

our items will line up at the top of the

container while flex and we'll line them

all up at the bottom of the container an

easy way to see this is if we add a

height property to our flexbox container

so if we put the height here and we just

make it let's say 700 pixels now you can

see that the Lex end for a wine content

has made our flex box items all wine at

the bottom of our container voila flex

start will make them aligned at a start

and this has very similar properties to

justify content for example we could put

space between here and now we have

spacing between our flex box item rows

and if we shrink this even further

you'll see that there's now even space

between them as well which is great but

aligned content is something that I

don't really use that often and really

justify content and align items are the

properties I use most since they align

your individual rows

along the main and cross axis now let's

revert that height back to the default

get rid of our line content justified

content a line items and wrap so we just

have a normal fox box container here and

we'll increase that size a little bit

and we'll also remove these accesses

since we no longer actually need them

now if we go back into our stylist here

and let's say we want a column layout

instead we'll just use our flex

direction change it to column and now

you see that are different fluxbox items

show up in a column as opposed to the

different row and if we used justified

content and we say Center for example

you'll notice that they don't Center

horizontally and that's because they're

centering inside of the column

vertically and if we put that height

back onto our Flex container let's make

it 800 pixels save that you'll see that

now they're centered vertically and

that's because justify content is using

the main axis which in this case is

column as opposed to row if we used

align items we put Center in here and

save it you'll see that now our items

are centering horizontally because the

cross axis is horizontal inside of a

column based flexbox container now we

can revert all that back to normal so we

just have our standard fluxbox container

here and we can start to talk about the

different properties you can apply it to

our different flexbox items as opposed

to the flexbox container as I mentioned

the container is really only for laying

out spacing between your items as well

as the positioning of your items inside

of the container the actual flexbox item

properties are meant to either override

those positioning and layout properties

or to apply different flexible sizing to

these elements as you can see by default

when we decrease the size of our browser

or items shrink in size but if we wanted

to prevent that on let's say only our

first item we could go in here use the

Flex rink property and set it to zero to

say we don't want it to shrink at all

and if we say that you now see our first

item does not shrink no matter how small

our browser gets but these other two

items shrink together we could also use

the Flex grow property if we wanted to

tell our items to grow bigger so if we

increase our size here we have all this

extra space let's say we wanted our

third flexbox item to fill that space

all we would do is that flex grow to be

won and now that item takes up all the

extra space no matter what size our

browser is we can also use flex grow on

multiple items so let's say we want our

second item to also grow we can just

apply it to here and as we increase our

browser size you'll see that they'll

both grow proportionately to one another

so that way this item the Flex box item

two and fluxbox item three are the same

exact size since they have the same

exact flex grow number if we for example

change this to be two and increase the

size of our browser you now see that our

fluxbox item two is about twice the size

of our fluxbox item three you will

notice however that fluxbox item two is

not exactly twice the size of fluxbox

item three as you would think by making

flex grow twice as big but all the Flex

grow property actually does is take all

of the leftover space so if we remove

these folks grows here you see we have

all this leftover space and it divides

it between all the different flex grows

so if we have a flex grow of two here

and we have a flux grow of one on the

third item fluxbox item two will get

twice the amount of available space that

fluxbox item three gets so if we say

that you'll see that this fluxbox item

two has gained twice of the available

space that was left over as flexbox item

three and the reason that fox box item

two is not actually twice the size of

fluxbox item three is because we have a

width set on our flex box items so it

takes this 200 pixels and then adds the

amount of available remaining space onto

that 200 pixels if we wanted to override

that we could use what is called the

Flex basis property and this tells our

flex box where to start growing from so

if we change this to zero our object

will imagine that it is zero pixels wide

when it starts adding an additional

space to it and if we did this for both

of our items here and saved it you'll

see that now Fox box item 2 is exactly

twice the size of bucks box item 3

because it started adding additional

space onto them in a two-to-one

proportion so it added twice as much to

fluxbox two as it did to flex box three

but they had no starting point at all

they started at zero which means that

fluxbox

2 here is twice the size of

box three when they started at 200

pixels it still added twice as much

space to Fox box two as Fox box three

but they had a 200 pixel beginning size

so they weren't actually exactly twice

the size as the other one

for the most part flex Gro flex shrink

and the different justify content and

align item properties or all you really

need in order to create dynamic and

complex layouts in either a row or a

column based container but if you needed

to override the cross access alignment

of a property you can do that with the

aligned self property and let's say we

wanted our second Fox box item to be in

the center of the container instead of

stretching the full height of the

container we can just use that and now

you can see that this aligns self

property overrides are aligned content

of our other containers and you can see

that it aligns in the center here while

these other items are aligning stretch

and this can be applied to all of our

different containers for example we

could go up to our flex box item one

here and make this one flex and and

you'll see that now this aligns itself

at the end of the container instead of

stretching which is the default for our

line items applied to our Fox box

container the very last property that is

left to talk about is the order property

that can be applied to our Fox box items

this allows us to change the order of

our items inside of our flexbox

container without actually changing our

HTML so for example if we wanted Fox box

item 1 to be our third item we would

change the order to three Fox box item

two let's say we want to be our first

item so we change the order here to 1

and then we'll change the order of this

Fox box 3 to be an order of two and if

you say that you now see that our second

item is at the beginning of our

container our third item is the second

item in our container and our first item

is the very last item in our container

and this is because we use the order

property to rearrange the order visually

of our items without changing the order

in our actual HTML this is a property I

highly advise not using unless you

really need it because this actually

messes up the flow for people using

screen readers since the screen reader

will still go in the order the HTML

which means they'll get eight Fox box

item one first Fox box item two second

and Fox box item three third even though

the order of display is different than

that

this also messes up when you're tabbing

through different form items for example

if this was an input element for a text

box our tab would go to the flux box

item one first and then flux box item to

second even though they're displayed in

order where it should be to first and

then three second so that's why I highly

advise not using the order property

unless you really need to rearrange the

orders visually without actually messing

with the HTML of the document and that's

really all there is to a flexbox

container for the most part you just

need to have a container that wraps your

different flux items you give it a

display of flex to say that you're using

a flux box container you then use the

justified content properties and the

align item properties inside of your

container in order to tell it how you

want to line these items inside of a

container and then lastly you can use

the different Flex trink grow and vases

properties in order to layout your items

individually inside of the flexbox

container to grow or shrink as you need

a shorthand for these different flex

shrink grow and basis properties is just

the straight-up flex property where the

first number as your flex grow the

second number is your flex ring and the

last number is your flex basis this is a

great shorthand property that you can

use in order to apply all three of those

different properties in one line you can

also leave off the later properties such

as if we only wanted to flex grow to be

one we just put flex one and it will

intelligently assign the Flex trink and

flex basis properties without us having

to actually manually set them so I hope

you guys enjoyed this video and learn

something new about flex box and how you

can use flex box in order to create

dynamic layouts for your site if you

guys did enjoy it please make sure to

leave a like down below and in the

comments let me know if there's anything

else about flex box you want me to talk

about in more depth in either a future

video or in a comment for you guys thank

you guys very much

have a good day