Reorder properties so that justify-content is placed before align-items, which makes a little more sense conceptually.

dist/styles.css

@@ -154,13 +154,6 @@
   display: -ms-flexbox;
   display: flex;
 
-  /**
-   * Align the children in the center, along
-   * the main axis, which is horizontal in this case.
-   */
-  -ms-flex-align: center;
-      align-items: center;
-
   /**
    * Make the container put as much space as possible
    * between its children, with the children at either
@@ -169,6 +162,13 @@
   -ms-flex-pack: justify;
       justify-content: space-between;
 
+  /**
+   * Align the children in the center, along
+   * the main axis, which is horizontal in this case.
+   */
+  -ms-flex-align: center;
+      align-items: center;
+
   border-top: 1px solid #D7DBDD;
   padding: 10px;
 }
@@ -278,6 +278,14 @@
   -ms-flex-direction: column;
       flex-direction: column;
 
+  /**
+   * Instead of pushing the children apart, as in
+   * previous examples, we will group them together
+   * in the center of their container.
+   */
+  -ms-flex-pack: center;
+      justify-content: center;
+
   /**
    * Align the children in the center, along
    * the main axis. Because the direction is
@@ -287,14 +295,6 @@
   -ms-flex-align: center;
       align-items: center;
 
-  /**
-   * Instead of pushing the children apart, as in
-   * previous examples, we will group them together
-   * in the center of their container.
-   */
-  -ms-flex-pack: center;
-      justify-content: center;
-
   min-height: 300px;
   padding: 10px;
 }
@@ -345,13 +345,6 @@
   -ms-flex-direction: column;
       flex-direction: column;
 
-  /**
-   * And just like in that example, align the children
-   * in the center, along the main axis.
-   */
-  -ms-flex-align: center;
-      align-items: center;
-
   /**
    * Same thing here as before: group the children
    * together in the center of their container.
@@ -359,6 +352,14 @@
   -ms-flex-pack: center;
       justify-content: center;
 
+  /**
+   * Just like in the "Centered prmopt" example,
+   * align the children in the center, along the
+   * main axis.
+   */
+  -ms-flex-align: center;
+      align-items: center;
+
   border: 1px solid #D7DBDD;
   font-size: 40px;
   width: 90px;
@@ -463,21 +464,21 @@
         flex-direction: column;
 
     /**
-     * Just like in the "Centered prompt" example,
+     * Just like in the "Centered prompt", we'll
-     * we'll align the children in the center, along
-     * the main axis.
-     */
-    -ms-flex-align: center;
-        align-items: center;
-
-    /**
-     * And just like in the "Centered prompt", we'll
      * group the children in the center of their
      * container.
      */
     -ms-flex-pack: center;
         justify-content: center;
 
+    /**
+     * And just like in the "Centered prompt" example,
+     * we'll align the children in the center, along
+     * the main axis.
+     */
+    -ms-flex-align: center;
+        align-items: center;
+
     padding: 15px 0;
   }
 
@@ -592,13 +593,6 @@
   display: -ms-flexbox;
   display: flex;
 
-  /**
-   * Align all the children to the end of the
-   * secondary axis. This is the bottom, by default.
-   */
-  -ms-flex-align: end;
-      align-items: flex-end;
-
   /**
    * Align all the children to the end of the main
    * axis. This is the right side, by default.
@@ -606,6 +600,13 @@
   -ms-flex-pack: end;
       justify-content: flex-end;
 
+  /**
+   * Align all the children to the end of the
+   * secondary axis. This is the bottom, by default.
+   */
+  -ms-flex-align: end;
+      align-items: flex-end;
+
   width: 145px;
   margin: 5px;
   padding: 5px 10px;

src/styles/card.css

@@ -32,19 +32,19 @@
     flex-direction: column;
 
     /**
-     * Just like in the "Centered prompt" example,
+     * Just like in the "Centered prompt", we'll
-     * we'll align the children in the center, along
-     * the main axis.
-     */
-    align-items: center;
-
-    /**
-     * And just like in the "Centered prompt", we'll
      * group the children in the center of their
      * container.
      */
     justify-content: center;
 
+    /**
+     * And just like in the "Centered prompt" example,
+     * we'll align the children in the center, along
+     * the main axis.
+     */
+    align-items: center;
+
     padding: 15px 0;
   }
 

src/styles/centered-icon.css

@@ -12,18 +12,19 @@
    */
   flex-direction: column;
 
-  /**
-   * And just like in that example, align the children
-   * in the center, along the main axis.
-   */
-  align-items: center;
-
   /**
    * Same thing here as before: group the children
    * together in the center of their container.
    */
   justify-content: center;
 
+  /**
+   * Just like in the "Centered prmopt" example,
+   * align the children in the center, along the
+   * main axis.
+   */
+  align-items: center;
+
   border: 1px solid #D7DBDD;
   font-size: 40px;
   width: 90px;

src/styles/centered-prompt.css

@@ -12,6 +12,13 @@
    */
   flex-direction: column;
 
+  /**
+   * Instead of pushing the children apart, as in
+   * previous examples, we will group them together
+   * in the center of their container.
+   */
+  justify-content: center;
+
   /**
    * Align the children in the center, along
    * the main axis. Because the direction is
@@ -20,13 +27,6 @@
    */
   align-items: center;
 
-  /**
-   * Instead of pushing the children apart, as in
-   * previous examples, we will group them together
-   * in the center of their container.
-   */
-  justify-content: center;
-
   min-height: 300px;
   padding: 10px;
 }

src/styles/form-footer.css

@@ -5,12 +5,6 @@
    */
   display: flex;
 
-  /**
-   * Align the children in the center, along
-   * the main axis, which is horizontal in this case.
-   */
-  align-items: center;
-
   /**
    * Make the container put as much space as possible
    * between its children, with the children at either
@@ -18,6 +12,12 @@
    */
   justify-content: space-between;
 
+  /**
+   * Align the children in the center, along
+   * the main axis, which is horizontal in this case.
+   */
+  align-items: center;
+
   border-top: 1px solid #D7DBDD;
   padding: 10px;
 }

src/styles/photo.css

@@ -5,18 +5,18 @@
    */
   display: flex;
 
-  /**
-   * Align all the children to the end of the
-   * secondary axis. This is the bottom, by default.
-   */
-  align-items: flex-end;
-
   /**
    * Align all the children to the end of the main
    * axis. This is the right side, by default.
    */
   justify-content: flex-end;
 
+  /**
+   * Align all the children to the end of the
+   * secondary axis. This is the bottom, by default.
+   */
+  align-items: flex-end;
+
   width: 145px;
   margin: 5px;
   padding: 5px 10px;