This cheatsheet was created for those who frequently use AngularJS Material for their "layout needs". If you don't have it all memorized quite yet, then this sheet will help you
|
row
|
Items arranged horizontally. max-height = 100% and max-width is the width of the items in the container.
|
|
column
|
Items arranged vertically. max-width = 100% and max-height is the height of the items in the container.
|
|
FIRST WORD
|
|
|
start
|
align to the right (default)
|
|
center
|
in the middle
|
|
end
|
align to the left
|
|
space-around
|
evenly space the children
|
|
space-between
|
align first child to the left, align last child to the right. The rest are spaced evenly between the two
|
|
SECONDWORD
|
|
|
start
|
align to the top
|
|
center
|
align in the center
|
|
end
|
align at the bottom
|
|
stretch
|
stretch child from top to bottom (default)
|
|
FIRST WORD
|
|
|
start
|
align to the top(default)
|
|
center
|
in the middle
|
|
end
|
align to the bottom
|
|
space-around
|
evenly space the children
|
|
space-between
|
align first child to the top, align last child to the bottom. The rest are spaced evenly between the two
|
|
SECONDWORD
|
|
|
start
|
align to the left
|
|
center
|
align in the center
|
|
end
|
align at the right
|
|
stretch
|
stretch child from left to right (default)
|
|
layout-margin
adds margin around each flex child. It also adds a margin to the layout container itself.
|
|
layout-padding
adds padding inside each flex child. It also adds padding to the layout container itself.
|
|
layout-fill
forces the layout element to fill its parent container.
|
|
layout-wrap
allows flex children to wrap within the container if the elements use more than 100%.
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
