備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin
Post on:2018年11月19日
sponsors
CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。
CSS Flexboxの各プロパティがまとめられたSass Mixin
flexboxのブラウザのサポート状況
- Internet Explorer 11+（10はプレフィックス「-ms-」が必要）
- Edge 12+
- Chrome 29+（21-28まではプレフィックス「-webkit-」が必要）
- Firefox 28+（2-21まではプレフィックス「-moz-」が必要）
- Opera 17+（15-16まではプレフィックス「-webkit-」が必要）
- Safari 9+（6.1-8まではプレフィックス「-webkit-」が必要）
- Android 4.4+（2.1-4.3はプレフィックス「-webkit-」が必要）
- iOS Safari 9+（7-8.4まではプレフィックス「-webkit-」が必要）
詳しいサポート状況は、下記ページをご覧ください。
まずはCSS Flexboxの各プロパティがベンダープレフィックス付きでまとめられたMixin。
サポートするブラウザに合わせて、ご利用ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
// -------------------------------------------------- // Flexbox SASS mixins // The spec: http://www.w3.org/TR/css3-flexbox // -------------------------------------------------- // Flexbox display @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } // The 'flex' shorthand // - applies to: flex items // <positive-number>, initial, auto, or none @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } // Flex Flow Direction // - applies to: flex containers // row | row-reverse | column | column-reverse @mixin flex-direction($direction) { -webkit-flex-direction: $direction; -moz-flex-direction: $direction; -ms-flex-direction: $direction; flex-direction: $direction; } // Flex Line Wrapping // - applies to: flex containers // nowrap | wrap | wrap-reverse @mixin flex-wrap($wrap) { -webkit-flex-wrap: $wrap; -moz-flex-wrap: $wrap; -ms-flex-wrap: $wrap; flex-wrap: $wrap; } // Flex Direction and Wrap // - applies to: flex containers // <flex-direction> || <flex-wrap> @mixin flex-flow($flow) { -webkit-flex-flow: $flow; -moz-flex-flow: $flow; -ms-flex-flow: $flow; flex-flow: $flow; } // Display Order // - applies to: flex items // <integer> @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } // Flex grow factor // - applies to: flex items // <number> @mixin flex-grow($grow) { -webkit-flex-grow: $grow; -moz-flex-grow: $grow; -ms-flex-grow: $grow; flex-grow: $grow; } // Flex shrink // - applies to: flex item shrink factor // <number> @mixin flex-shrink($shrink) { -webkit-flex-shrink: $shrink; -moz-flex-shrink: $shrink; -ms-flex-shrink: $shrink; flex-shrink: $shrink; } // Flex basis // - the initial main size of the flex item // - applies to: flex itemsnitial main size of the flex item // <width> @mixin flex-basis($width) { -webkit-flex-basis: $width; -moz-flex-basis: $width; -ms-flex-basis: $width; flex-basis: $width; } // Axis Alignment // - applies to: flex containers // flex-start | flex-end | center | space-between | space-around @mixin justify-content($justify) { -webkit-justify-content: $justify; -moz-justify-content: $justify; -ms-justify-content: $justify; justify-content: $justify; -ms-flex-pack: $justify; } // Packing Flex Lines // - applies to: multi-line flex containers // flex-start | flex-end | center | space-between | space-around | stretch @mixin align-content($align) { -webkit-align-content: $align; -moz-align-content: $align; -ms-align-content: $align; align-content: $align; } // Cross-axis Alignment // - applies to: flex containers // flex-start | flex-end | center | baseline | stretch @mixin align-items($align) { -webkit-align-items: $align; -moz-align-items: $align; -ms-align-items: $align; align-items: $align; } // Cross-axis Alignment // - applies to: flex items // auto | flex-start | flex-end | center | baseline | stretch @mixin align-self($align) { -webkit-align-self: $align; -moz-align-self: $align; -ms-align-self: $align; align-self: $align; } |
CSS Flexboxの各プロパティの詳しい説明は、下記が参考になります。
CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin
CSS Flexboxでレイアウトを実装する際に使用される基本的なグリッドが収録されたSass Mixinです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$grid-rows: 12 $sizes: (sm 480px, md 768px, lg 992px, xl 1200px) $prefix: 'w' $padding: 6px 4px .container margin: 0 auto .row display: flex flex-wrap: wrap > div[class*='#{$prefix}-'] padding: $padding box-sizing: border-box > div:not([class*='#{$prefix}-']) flex: 1 padding: $padding @for $i from 1 through $grid-rows .#{$prefix}-#{$i} flex-basis: $i / $grid-rows * 100% .#{$prefix}-offset-#{$i} margin-left: $i / $grid-rows * 100% @each $sizeLabel, $value in $sizes [class*='#{$prefix}-offset-#{$sizeLabel}-'] margin-left: 0 .#{$prefix}-#{$sizeLabel}-#{$i} flex-basis: 100% @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) > div[class*='#{$prefix}-'].#{$classLabel} align-self: $cssValue @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between) &.#{$classLabel} justify-content: $cssValue @each $sizeLabel, $value in $sizes @media only screen and (min-width: #{$value}) @for $i from 1 through $grid-rows .row > .#{$prefix}-#{$sizeLabel}-#{$i} flex-basis: $i / $grid-rows * 100% .row > .#{$prefix}-offset-#{$sizeLabel}-#{$i} margin-left: $i / $grid-rows * 100% .container width: if(index($sizes,$sizeLabel $value) > 2, $value, 99%) |
ベースのグリッドは12カラムで、classを与えるだけで簡単に利用できます。
グリッドはすべてレスポンシブ対応です。
垂直・水平方向に揃える際のclassも用意されています。
sponsors
