feat(tabs): align with 2018 material design spec (#12605)

Aligns the tabs component with the latest Material design spec and adds the ability to align the tab labels in the middle or the end of the container.

![angular_material_-_google_chrome_2018-08-09_21-49-20](https://user-images.githubusercontent.com/4450522/43922278-7ddc9b7e-9c1e-11e8-9a16-86c4427efcf8.png)
![angular_material_-_google_chrome_2018-08-09_21-49-31](https://user-images.githubusercontent.com/4450522/43922279-7dfe19fc-9c1e-11e8-98a2-e4606a01a6ab.png)

Author: crisbeto

src/lib/tabs/tab-header.scss

@@ -82,4 +82,12 @@
 
 .mat-tab-labels {
   display: flex;
+
+  [mat-align-tabs='center'] & {
+    justify-content: center;
+  }
+
+  [mat-align-tabs='end'] & {
+    justify-content: flex-end;
+  }
 }

src/lib/tabs/tabs.md

@@ -83,7 +83,7 @@ the `active` property to determine which tab is currently active. The correspond
 ### Lazy Loading
 By default, the tab contents are eagerly loaded. Eagerly loaded tabs
 will initalize the child components but not inject them into the DOM
-until the tab is activated. 
+until the tab is activated.
 
 
 If the tab contains several complex child components or the tab's contents
@@ -108,6 +108,12 @@ with the `matTabContent` attribute.
 </mat-tab-group>
 ```
 
+### Label alignment
+If you want to align the tab labels in the center or towards the end of the container, you can
+do so using the `[mat-align-tabs]` attribute.
+
+<!-- example(tab-group-align) -->
+
 ### Accessibility
 Tabs without text or labels should be given a meaningful label via `aria-label` or
 `aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.

src/material-examples/tab-group-align/tab-group-align-example.css

@@ -0,0 +1,3 @@
+.mat-tab-group {
+  margin-bottom: 48px;
+}

src/material-examples/tab-group-align/tab-group-align-example.html

@@ -0,0 +1,17 @@
+<mat-tab-group mat-align-tabs="start">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="center">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<mat-tab-group mat-align-tabs="end">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>

src/material-examples/tab-group-align/tab-group-align-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with aligned labels
+ */
+@Component({
+  selector: 'tab-group-align-example',
+  templateUrl: 'tab-group-align-example.html',
+  styleUrls: ['tab-group-align-example.css'],
+})
+export class TabGroupAlignExample {}