Created
April 15, 2015 15:51
-
-
Save ogbaoghene/8934d7953a871b72d6bc to your computer and use it in GitHub Desktop.
Define behavior for flexbox containers and items.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Parameters: | |
| // ```scss | |
| // $layout : establish main-axis, either horizontal or vertical. | |
| // $nowrap : flex items will try to fit onto one line. Optional | |
| // $alignment : define alignment along the main and cross axis. Defaults to default | |
| // $align-content : align lines in flex container when there is extra space. Optional | |
| // | |
| // $flex : shorthand for flex-grow, flex-shrink and flex-basis. Defaults to auto | |
| // $order : order flex-items. Optional | |
| // $align-self : override default alignment of individual flex items. Optional | |
| // ``` | |
| // | |
| // Usage: | |
| // ```scss | |
| // .example { | |
| // @include flexbox($layout: horizontal, $alignment: space-between stretch); | |
| // | |
| // .test-child { | |
| // @include flexbox-child($flex: 0 0 auto, $align-self: flex-end); | |
| // } | |
| // } | |
| // | |
| // .example-2 { | |
| // @include flexbox($layout: horizontal, $alignment: center, $nowrap: true); | |
| // } | |
| // ``` | |
| // | |
| // **Requires** : _layoutProperties | |
| // | |
| // Styleguide 2.13 | |
| // TODO: remove | |
| @mixin flexbox($layout, $nowrap: null, $alignment: default, $align-content: null) { | |
| @extend %do-flex; | |
| @if $layout == horizontal and $nowrap != null { | |
| flex-flow: row nowrap; | |
| } @else if $layout == horizontal and $nowrap == null { | |
| flex-flow: row wrap; | |
| } @else if $layout == vertical and $nowrap != null { | |
| flex-flow: column nowrap; | |
| } @else if $layout == vertical and $nowrap == null { | |
| flex-flow: column wrap; | |
| } @else { | |
| @warn 'Flexbox layout is required.'; | |
| } | |
| @if $alignment != default { | |
| @if length($alignment) > 1 { | |
| $justify: nth($alignment, 1); | |
| $align: nth($alignment, 2); | |
| justify-content: $justify; | |
| align-items: $align; | |
| } @else if $alignment == center { | |
| justify-content: center; | |
| align-items: center; | |
| } @else if $alignment == end { | |
| justify-content: flex-end; | |
| align-items: flex-end; | |
| } @else if $alignment == start { | |
| justify-content: flex-start; | |
| align-items: flex-start; | |
| } @else { | |
| @warn '`#{$alignment}` is not a valid option. Properties omitted.'; | |
| } | |
| } @else { | |
| justify-content: flex-start; | |
| align-items: stretch; | |
| } | |
| @if $align-content != null { | |
| align-content: $align-content; | |
| } | |
| } | |
| @mixin flexbox-child($flex: auto, $order: null, $align-self: null) { | |
| @if $flex == auto or $flex == none { | |
| flex: $flex; | |
| } @else if length($flex) > 1 and length($flex) < 4 { | |
| flex: $flex; | |
| } @else { | |
| @warn 'Values are out of bounds. Properties omitted.'; | |
| } | |
| @if $order != null { | |
| order: $order; | |
| } | |
| @if $align-self != null { | |
| align-self: $align-self; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment