From 7354301f6ba4c6c9e894bbcfd8d363564311209b Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Sun, 18 Dec 2016 12:11:38 -0800 Subject: [PATCH] Reorder properties so that justify-content is placed before align-items, which makes a little more sense conceptually. --- dist/styles.css | 77 +++++++++++++++++----------------- src/styles/card.css | 16 +++---- src/styles/centered-icon.css | 13 +++--- src/styles/centered-prompt.css | 14 +++---- src/styles/form-footer.css | 12 +++--- src/styles/photo.css | 12 +++--- 6 files changed, 73 insertions(+), 71 deletions(-) diff --git a/dist/styles.css b/dist/styles.css index 5d48757..1b7a716 100644 --- a/dist/styles.css +++ b/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, - * 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 + * 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; diff --git a/src/styles/card.css b/src/styles/card.css index d27372f..dcea11f 100644 --- a/src/styles/card.css +++ b/src/styles/card.css @@ -32,19 +32,19 @@ flex-direction: column; /** - * Just like in the "Centered prompt" example, - * we'll align the children in the center, along - * the main axis. - */ - align-items: center; - - /** - * And just like in the "Centered prompt", we'll + * 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; } diff --git a/src/styles/centered-icon.css b/src/styles/centered-icon.css index fe22e1d..f4c6d49 100644 --- a/src/styles/centered-icon.css +++ b/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; diff --git a/src/styles/centered-prompt.css b/src/styles/centered-prompt.css index 02349e9..b8e0765 100644 --- a/src/styles/centered-prompt.css +++ b/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; } diff --git a/src/styles/form-footer.css b/src/styles/form-footer.css index 48d1f85..e7f7179 100644 --- a/src/styles/form-footer.css +++ b/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; } diff --git a/src/styles/photo.css b/src/styles/photo.css index 94e3737..598fea4 100644 --- a/src/styles/photo.css +++ b/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;