diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index 76ad697b8ac..cd61602d801 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -869,10 +869,10 @@ table.md-css-table td p {
.layout_note {
font-size: 0.9em;
- margin: -5px 40px 0px 20px;
- color: rgb(1, 57, 114);
- background-color: rgba(156, 204, 101,0.4);
- padding: 20px;
+ margin: -5px 40px 0 20px;
+ color: rgb(1, 57, 114);
+ background-color: rgba(156, 204, 101,0.4);
+ padding: 20px;
}
.contributor_tables {
diff --git a/docs/app/partials/layout-children.tmpl.html b/docs/app/partials/layout-children.tmpl.html
index a504caf060a..331058e4ca0 100644
--- a/docs/app/partials/layout-children.tmpl.html
+++ b/docs/app/partials/layout-children.tmpl.html
@@ -4,7 +4,8 @@ Children within a Layout Container
To customize the size and position of elements in a layout container, use the
- flex, flex-order, and flex-offset attributes on the container's child elements:
+ flex, flex-order, and flex-offset attributes on the
+ container's child elements:
@@ -24,9 +25,10 @@ Children within a Layout Container
- Add the flex directive to a layout's child element and the element will flex (grow or shrink) to fit
- the area unused by other elements. flex defines how the element will adjust its size with respect to its
- parent container and the other elements within the container.
+ Add the flex directive to a layout's child element and the element will flex
+ (grow or shrink) to fit the area unused by other elements. flex defines how the
+ element will adjust its size with respect to its parent container and the other elements
+ within the container.
@@ -73,16 +75,103 @@ Children within a Layout Container
flex 33% on mobile,
and 66% on gt-sm devices.
- flex 66% on mobile,
and 33% on gt-sm devices.
+ flex 66% on mobile,
and 33% on gt-sm devices.
+
+ You can specify multiple flex directives on the same element in order to create
+ flexible responsive behaviors across device sizes.
+
+
+ Please take care not to overlap these directives, for example:
+ flex="100" flex-md="50" flex-gt-sm="25". In this example, there are two directives
+ that apply to "medium" devices (50 and 25).
+
+
+ The below example demonstrates how to use multiple flex directives overrides to
+ achieve a desirable outcome:
+
+
+
+
+
+
+ flex 100% on mobile,
and 33% on gt-sm devices.
+
+
+ flex 100% on mobile,
and 66% on gt-sm devices.
+
+
+ flex 100% on mobile, 50% on md, and 25% on gt-md devices.
+
+
+ flex 100% on mobile, 50% on md, and 25% on gt-md devices.
+
+
+ flex 100% on mobile, 50% on md, and 25% on gt-md devices.
+
+
+ flex 100% on mobile, 50% on md, and 25% on gt-md devices.
+
+
+ When a responsive layout directive like layout-gt-sm is active, any flex directives
+ within that layout, that you want applied, should be active at the same time. This means that
+ the flex directives that match up with layout-gt-sm would be
+ flex-gt-sm and not just flex.
+
+
+ This example demonstrates what happens when the proper flex suffix is omitted. In this case, the
+ flex="66" directive is interpreted in context of the layout="column"
+ layout. This is most likely not desirable.
+
+
+
+
+
+
+
+ column layout on mobile,
flex 33% on gt-sm devices.
+
+
+
+ [flex 66%]
+
+
+ Here's the same example as above with the correct flex-gt-sm="66" directive:
+
+
+
+
+
+
+ column layout on mobile,
flex 33% on gt-sm devices.
+
+
+ column layout on mobile,
flex 66% on gt-sm devices.
+
+
- See the layout options page for more information on responsive flex directives like
- hide-sm and layout-wrap used in the above examples.
+ See the layout options page for more information on responsive flex
+ directives like hide-sm and layout-wrap used in the above examples.
diff --git a/src/core/style/layout.scss b/src/core/style/layout.scss
index eea49403bbb..67fd3f3fb7b 100644
--- a/src/core/style/layout.scss
+++ b/src/core/style/layout.scss
@@ -168,30 +168,13 @@
// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-height: 0; }
}
-
- @if ($name != '') {
- .layout#{$name}-row > .flex-#{$i * 5} {
- flex: 1 1 100%;
- max-width: #{$value};
- max-height: 100%;
- box-sizing: border-box;
-
- // Required by Chrome M48+ due to http://crbug.com/546034
- @if $i == 0 { min-width: 0; }
- }
-
- .layout#{$name}-column > .flex-#{$i * 5} {
- flex: 1 1 100%;
- max-width: 100%;
- max-height: #{$value};
- box-sizing: border-box;
-
- // Required by Chrome M48+ due to http://crbug.com/546034
- @if $i == 0 { min-height: 0; }
- }
- }
}
+ @if ($name == '') {
+ .flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
+ .flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
+ }
+
.layout-row {
> .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
@@ -217,24 +200,6 @@
// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-height: 0; }
}
-
- @if ($name != '') {
- .layout#{$name}-row {
- > .flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
- > .flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
-
- // Required by Chrome M48+ due to http://crbug.com/546034
- > .flex { min-width: 0; }
- }
-
- .layout#{$name}-column {
- > .flex-33 { flex: 1 1 100%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
- > .flex-66 { flex: 1 1 100%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
-
- // Required by Chrome M48+ due to http://crbug.com/546034
- > .flex { min-height: 0; }
- }
- }
}
@mixin layout-align-for-name($suffix: null) {