feat(card): add alignment shortcuts for md-card-actions

Author: kara

src/components/card/README.md

@@ -51,6 +51,12 @@ Output:
 
 <img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
 
+#### Preset shortcuts
+
+`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
+the main axis (flex-end) or `align="column"` to arrange your action buttons in a column. The default is
+`align="start"` (flex-start).
+
 ### Preset layouts
 
 You can also leverage preset layouts that format some of the sections together.

src/components/card/card.scss

@@ -55,6 +55,16 @@ md-card-actions {
   margin-left: -16px;
   margin-right: -16px;
   padding: 8px 0;
+
+  &[align='end'] {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &[align='column'] {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 [md-card-image] {

src/demo-app/card/card-demo.html

@@ -26,6 +26,10 @@
     <md-card-content>
       <p>Here is some content</p>
     </md-card-content>
+    <md-card-actions align="end">
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </md-card-actions>
   </md-card>
 
   <md-card>
@@ -42,7 +46,7 @@
 
   <md-card class="demo-card-blue md-card-flat">
     <md-card-title>Easily customizable</md-card-title>
-    <md-card-actions>
+    <md-card-actions align="column">
       <button md-button>First</button>
       <button md-button>Second</button>
     </md-card-actions>

src/demo-app/card/card-demo.scss

@@ -14,9 +14,4 @@
 
 .demo-card-blue {
   background-color: #B0BECC;
-
-  md-card-actions {
-    display: flex;
-    flex-direction: column;
-  }
 }