Skip to content

Latest commit

 

History

History
67 lines (57 loc) · 2.06 KB

Flexbox_CheatSheet.md

File metadata and controls

67 lines (57 loc) · 2.06 KB
#Allow Flexbox display
	display: flex;

#Align items horizontally
	justify-content:
		#Options include:
			flex-start; - items align to left of container
			flex-end; - items align to right of container
			center; - items align at center of container
			space-between; - equal spacing between items, with first at start and final at end
			space-around; - equal spacing around items
			space-evenly; - even spacing around items with a full space at either end

#Align items vertically
	align-items:
		#Options include:
			flex-start; - items align to top of container
			flex-end; - items align to bottom of container
			center; - items align to vertical center of container
			baseline; - items align to baseline of container
			stretch; - items stretched to fit

#Change direction
	flex-direction:
		#Options include:
			row; - items placed the same as text direction
			row-reverse; - items placed opposite to text direction
			column; - items are placed top to bottom
			column-reverse: items are placed bottom to top

#Align specific item
	align-self:
		#Options include same values as 'align-items' but for a specific item
		#Overrides 'align-items'

#Wrap items
	flex-wrap:
		#Options include:
			nowrap: every items is fit to a single line
			wrap: items wrap around to additional lines
			wrap-reverse: items wrap around to additional lines in reverse

#Combination of direction and wrap
	flex-flow:
		#Options include:
			row wrap; - sets rows and wraps them
			row nowrap;
			row reverse nowrap;
			column reverse;
			column wrap-reverse
			column wrap

#Space multiple lines a certain way
	align-content:
		#Options include:
			flex-start; - lines packed at top of container
			flex-end; - lines packed at bottom of container
			center; lines packed at vertical center of container
			space-between: lines display with equal spacing between them
			space-around: lines display with equal spacing around them
			stretch: lines are stretched to fit the container

#Order items
	order:
		#Can be positive or negative. Default order value of 0.