Scribd
Upload
19 views6 pages

Flexbox Cheatsheet-1

Well

Uploaded by

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

Flexbox Cheatsheet-1

Well

Uploaded by

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

Flexbox Cheatsheet

Container
display flex-direction
Establishes the main axis.
Enables flex for all children.

display: flex; flex-direction: row;

display: inline-flex;
flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;
flex-wrap justify-content
Wraps items if they can't all be Attempts to distribute extra space on the main
made to fit on one line. axis.

flex-wrap: nowrap; justify-content: flex-start;

justify-content: flex-end;

flex-wrap: wrap;

justify-content: center;

flex-wrap: wrap-reverse; justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;
align-items align-content
Determines how items are laid out Only has an effect with more than one
on the cross axis. line of content. Examples shown here use
flex-wrap.

align-items: flex-start; align-content: flex-start;

align-content: flex-end;
align-items: flex-end;

align-content: center;

align-items: center;

align-content: space-between;

align-items: baseline;

align-content: space-around;

align-items: stretch;
align-content: stretch;
Children
order flex-grow
Allows you to determine how each child is
Allows you to explictly set the
allowed to grow as a part of a whole.
order you want each child to
appear in.

flex-grow: 1;

order: 1;

flex-grow: 1, 2, 3;

flex-basis
Defines the size of an element
before remaining space is
distributed.

first item 20%, second item 40%


flex-shrink align-self
Sets alignment for individual item. See
Allows an item to shrink if
"align-items" for options
necessary. Only really useful with
a set size or flex-basis.

both want to be 100%


3rd item has align-
wide, 2nd item has
self:flex-end
flex-shrink:

Save this post if


this is helpful

You might also like