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

[1]: Fix IE11 flex shorthand bug with card and cardGroup.

Browse Source
This commit is contained in:
CJ Cenizal (MacBook Air)
2016-04-30 18:33:33 -07:00
parent a455706b56
commit 45193b80d2
3 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dist/styles.css vendored
View File

@@ -487,7 +487,7 @@
/** /**
* We're going to lay out this element's children * We're going to lay out this element's children
* just like in the "Centered prompt" example. * just like in the "Centered prompt" example.
* First we'll rotate the main axis so that the * First we'll rotate the main axis so that the
* children are laid out vertically. * children are laid out vertically.
*/ */
-webkit-flex-direction: column; -webkit-flex-direction: column;
@@ -512,7 +512,7 @@
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
padding: 15px; padding: 15px 0;
} }
.card__descriptionIcon { .card__descriptionIcon {
@@ -524,6 +524,7 @@
color: #57727C; color: #57727C;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
max-width: calc(100% - 30px);
} }
.card__price { .card__price {
@@ -539,6 +540,7 @@
.card--fixedWidth { .card--fixedWidth {
max-width: 120px; max-width: 120px;
} }
/*===================================================== /*=====================================================
contents of: index.css contents of: index.css
=====================================================*/ =====================================================*/
@@ -566,13 +568,13 @@
* properties. These properties control how the * properties. These properties control how the
* element resizes to fill its container. * element resizes to fill its container.
* *
* We'll also set flex-grow to 1 so that it * We'll set flex-grow to 1 so that it will
* will expand to fill its container. (The * expand to fill its container. (The default
* default value is 0.) * default value is 0.)
* *
* We'll set flex-shrink to 1 so that the element * We'll also set flex-shrink to 1 so that the
* will shrink as its container gets smaller. * element will shrink as its container gets
* (The default value is 1.) * smaller. (The default value is 1.)
* *
* Last, we set flex-basis to 0 so that its * Last, we set flex-basis to 0 so that its
* size is solely determined by the size of * size is solely determined by the size of
@@ -585,10 +587,16 @@
* shrink with its container and siblings, but * shrink with its container and siblings, but
* they will all have the same size, even if they * they will all have the same size, even if they
* have different amounts of content. * have different amounts of content.
*
* NOTE: IE11 ignores flex short-hand declarations
* with unitless flex-basis values. So we have to
* use 0% instead of 0 as a workaround. You can
* find more info at:
* github.com/philipwalton/flexbugs.
*/ */
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0%;
-ms-flex: 1 1 0; -ms-flex: 1 1 0%;
flex: 1 1 0; flex: 1 1 0%;
border: none; border: none;
border-radius: 0; border-radius: 0;

18
src/styles/card-group.css
View File

@@ -17,13 +17,13 @@
* properties. These properties control how the * properties. These properties control how the
* element resizes to fill its container. * element resizes to fill its container.
* *
* We'll also set flex-grow to 1 so that it * We'll set flex-grow to 1 so that it will
* will expand to fill its container. (The * expand to fill its container. (The default
* default value is 0.) * default value is 0.)
* *
* We'll set flex-shrink to 1 so that the element * We'll also set flex-shrink to 1 so that the
* will shrink as its container gets smaller. * element will shrink as its container gets
* (The default value is 1.) * smaller. (The default value is 1.)
* *
* Last, we set flex-basis to 0 so that its * Last, we set flex-basis to 0 so that its
* size is solely determined by the size of * size is solely determined by the size of
@@ -36,8 +36,14 @@
* shrink with its container and siblings, but * shrink with its container and siblings, but
* they will all have the same size, even if they * they will all have the same size, even if they
* have different amounts of content. * have different amounts of content.
*
* NOTE: IE11 ignores flex short-hand declarations
* with unitless flex-basis values. So we have to
* use 0% instead of 0 as a workaround. You can
* find more info at:
* github.com/philipwalton/flexbugs.
*/ */
flex: 1 1 0; flex: 1 1 0%;
border: none; border: none;
border-radius: 0; border-radius: 0;

7
src/styles/card.css
View File

@@ -26,7 +26,7 @@
/** /**
* We're going to lay out this element's children * We're going to lay out this element's children
* just like in the "Centered prompt" example. * just like in the "Centered prompt" example.
* First we'll rotate the main axis so that the * First we'll rotate the main axis so that the
* children are laid out vertically. * children are laid out vertically.
*/ */
flex-direction: column; flex-direction: column;
@@ -45,7 +45,7 @@
*/ */
justify-content: center; justify-content: center;
padding: 15px; padding: 15px 0;
} }
.card__descriptionIcon { .card__descriptionIcon {
@@ -57,6 +57,7 @@
color: #57727C; color: #57727C;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
max-width: calc(100% - 30px);
} }
.card__price { .card__price {
@@ -71,4 +72,4 @@
.card--fixedWidth { .card--fixedWidth {
max-width: 120px; max-width: 120px;
} }