Show Menu
Cheatography
  1. Home >
  2. Programming >

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

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 direction 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
SECONDWORD
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
SECONDWORD
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

layout­-margin
adds margin around each flex child. It also adds a margin to the layout container itself.
layout­-pa­dding
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%.
                       
 

Metadata

  • Languages:
  • Published: 22nd May, 2018
  • Rated: 4 out of 5 stars based on 1 ratings

Favourited By

charaf ess

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

          More Cheat Sheets by briyvonne01

          Javascript Algorithmic Cookbook Cheatsheet Cheat Sheet