Show Menu

AngularJS Material Layout Cheatsheet Cheat Sheet by

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
css     html     javascript     design     angularjs     material     layout

Layout and Containers

row
Items arranged horizo­ntally. max-height = 100% and max-width is the width of the items in the container.
column
Items arranged vertic­ally. max-width = 100% and max-height is the height of the items in the container.
Note that row is the default layout direct­ion if you specify the layout directive without a value.

Child Alignment (Layou­t="r­ow") Horizontal

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
SECO­NDW­ORD
start
align to the top
center
align in the center
end
align at the bottom
stretch
stretch child from top to bottom (default)
The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpen­dicular to the layout's direction.
 

Child Alignment (Layou­t="c­olu­mn") Vertical

FIRST WORD
start
align to the top(de­fault)
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
SECO­NDW­ORD
start
align to the left
center
align in the center
end
align at the right
stretch
stretch child from left to right (default)
The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpen­dicular to the layout's direction.

Extra Options

layo­ut-­mar­gin
adds margin around each flex child. It also adds a margin to the layout container itself.
layo­ut-­pad­ding
adds padding inside each flex child. It also adds padding to the layout container itself.
layo­ut-­fill
forces the layout element to fill its parent container.
layo­ut-­wrap
allows flex children to wrap within the container if the elements use more than 100%.

Download the AngularJS Material Layout Cheatsheet Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/briyvonne01_angularjs-material-layout-cheatsheet.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Exam Cheat Sheet
          Plugins de Navigateurs pour les Web Workers Cheat Sheet