mirror/flexbox-patterns
1
0
Fork 0
mirror of https://github.com/cjcenizal/flexbox-patterns.git synced 2025-08-10 18:14:14 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
CJ Cenizal
2016-12-18 12:11:38 -08:00
parent 767630e3a7
commit 7354301f6b
6 changed files with 73 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
dist/styles.css vendored
View File

@@ -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;

16
src/styles/card.css
View File

@@ -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;
}

13
src/styles/centered-icon.css
View File

@@ -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;

14
src/styles/centered-prompt.css
View File

@@ -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;
}

12
src/styles/form-footer.css
View File

@@ -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;
}

12
src/styles/photo.css
View File

@@ -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;