Scribd
Upload
33 views2 pages

9.2 Flex Layout

Uploaded by

davidlzr93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views2 pages

9.2 Flex Layout

Uploaded by

davidlzr93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Flex Layout

In flexbox there are properties that can go to the parent (container)


or the child (items).

We normaly know that in flexbox the default order is from left to


right. But if we want to take one of the items from the default order
and place it at the end of the order, we can use a property called
order. This property is set by default to 0. When we want to change
the order we can give any value > 0 (just like the case with the z-
idex).

Another flexbox property used for layout is called flex-wrap. This is


a property of the parent. This property has 3 values:

 Nowrap: this is the default value for this property

 Wrap: this property allows any item that wouldn’t fit on the first
row to move on the next one.

 Wrap-reverse: it does the same as wrap but starts from the


bottom right isntead of top left.

Justify-content is another property used for flexbox layout. It can


only work if flex-wrap is set to wrap.This property is used for the
distribution of the items. If we have a row base axis justify-content
will be our main-axis.

This property can have these values:

 Flex-start: all the items start from top left

 Center: all items are centered

 Flex-end: all items start from top right


 Space-between: first item starts from top left and then adds
equal space between all items. This value makes sure that the
first and last items are stucked to the margin container.

 Space-around: the distance between the margin of the


container and the first item and the distance between the the
last item and margin of the container is equal to the distance
between all other items

 Space-evenly: each of the gaps are equal.

The next property is called align-items. This is another property of


the parent. This property is used for the distribution of the items.It
can only work if flex-wrap is set to wrap. If we have a row base axis
align-items will be our cross-axis. For it to work we need to set the
height of our container.

This property can have these values:

 Flex-start: all the items start from top left

 Flex-end: all the items start from bottom left

 Center: all items are centered

 Baseline: all the items start from top left (the base of the cross-
axis↓)

 Stretch: stretches the itmes throught all the height of the


container

Last flexbox layout property is align-content. This property is the


same as align-items but only works when the flex-wrap is set to
wrap.

You might also like