Amin Code Land

Flex Box

Property	Description	Options	Result
display	Specifies the type of flex container for the flex items.	block flex	1 2 3
flex-direction	Defines the direction of the main axis.	row row-reverse column column-reverse	1 2 3
flex-wrap	Determines whether the flex items are forced into a single line or can be wrapped onto multiple lines.	nowrap wrap wrap-reverse	1 2 3 4 5
flex-flow	Shorthand property for setting both the flex-direction and flex-wrap properties.	row nowrap row wrap row wrap-reverse ---------------- row-reverse nowrap row-reverse wrap row-reverse wrap-reverse ---------------- column nowrap column wrap column wrap-reverse ---------------- column-reverse nowrap column-reverse wrap column-reverse wrap-reverse
justify-content	Aligns flex items along the main axis.	center
align-items	Aligns flex items along the cross axis.	center
align-content	Aligns a flex containerís lines within when there is extra space in the cross-axis.	space-between
order	Specifies the order of a flex item relative to the other flex items within the same container.	2
flex-grow	Determines how much a flex item will grow relative to the rest of the flex items inside the same container.	1
flex-shrink	Specifies the ability of a flex item to shrink if necessary.	2
flex-basis	Defines the initial size of a flex item along the main axis before any available space is distributed.	200px
flex	Shorthand property for setting the flex-grow, flex-shrink, and flex-basis properties.	1 2 200px
align-self	Allows the default alignment to be overridden for individual flex items.	flex-end