flexbox-grid-mixins

<!DOCTYPE html> <html> <head> <title>Flexbox Grid Mixins</title> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/default-example.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> </head> <body> <div class="header header--hero"> <h1 class="header-title">Flexbox Grid Mixins <span class="version">v.0.3.4</span></h1> <p class="header-description">Sass Mixins to generate Flexbox grid</p> <ul class="header-nav"> <li><a href="#Basic-Example">Basic Example</a></li> <li><a href="#Grid-System-Example">Grid System Example</a></li> <li><a href="#Examples">Examples</a></li> <li><a href="#Installation">Installation</a></li> <li><a href="#Getting-Started">Getting Started</a></li> <li><a href="#Mixins-Reference">Mixins Reference</a></li> <li><a href="#Contribute">Contribute</a></li> <li><a href="#License">License</a></li> </ul> <ul class="header-nav"> <li><a href="https://github.com/thingsym/flexbox-grid-mixins" class="btn"><i class="fab fa-github"></i> GitHub</a></li> <li><a href="https://www.npmjs.com/package/flexbox-grid-mixins" class="btn"><i class="fab fa-npm"></i> npm</a></li> </ul> </div> <div class="container"> <h2>Feature</h2> <p><strong>Flexbox Grid Mixins</strong> is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).</p> <h2 id="Basic-Example">Basic Example</h2> <h3>Demo</h3> <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> <h3>HTML</h3> <pre> <code><div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> </code></pre> <h3>Sass</h3> <div class="columns"> <div class="column"> <h4>Dart Sass</h4> <pre> <code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } </code></pre> </div> <div class="column"> <h4>LibSass</h4> <pre> <code>@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include grid($gutter: $default-grid-gutter); > .grid__col-3 { @include grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include grid-col($col: 9, $gutter: $default-grid-gutter); } } </code></pre> </div> </div> <h3>CSS</h3> <pre class="scrollable"> <code>.grid { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -1%; margin-right: -1%; } .grid > .grid__col-3 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 23%; flex: 0 0 23%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-9 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 73%; flex: 0 0 73%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } </code></pre> <h2 id="Grid-System-Example">Grid System Example</h2> <h3>Demo</h3> <div class="grid"> <div class="grid__col-12"> 12 </div> </div> <div class="grid"> <div class="grid__col-1"> 1 </div> <div class="grid__col-11"> 11 </div> </div> <div class="grid"> <div class="grid__col-2"> 2 </div> <div class="grid__col-10"> 10 </div> </div> <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> <div class="grid"> <div class="grid__col-4"> 4 </div> <div class="grid__col-8"> 8 </div> </div> <div class="grid"> <div class="grid__col-5"> 5 </div> <div class="grid__col-7"> 7 </div> </div> <div class="grid"> <div class="grid__col-6"> 6 </div> <div class="grid__col-6"> 6 </div> </div> <h3>HTML</h3> <pre class="scrollable"><code><div class="grid"> <div class="grid__col-12"> 12 </div> </div> <div class="grid"> <div class="grid__col-1"> 1 </div> <div class="grid__col-11"> 11 </div> </div> <div class="grid"> <div class="grid__col-2"> 2 </div> <div class="grid__col-10"> 10 </div> </div> <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> <div class="grid"> <div class="grid__col-4"> 4 </div> <div class="grid__col-8"> 8 </div> </div> <div class="grid"> <div class="grid__col-5"> 5 </div> <div class="grid__col-7"> 7 </div> </div> <div class="grid"> <div class="grid__col-6"> 6 </div> <div class="grid__col-6"> 6 </div> </div> </code></pre> <h3>Sass</h3> <div class="columns"> <div class="column"> <h4>Dart Sass</h4> <pre> <code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-columns: 12; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); @for $i from 1 through $default-grid-columns { > .grid__col-#{$i} { @include flexbox-grid-mixins.grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter); } } } </code></pre> </div> <div class="column"> <h4>LibSass</h4> <pre> <code>@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; $default-grid-columns: 12; $default-grid-gutter: 2%; .grid { @include grid($gutter: $default-grid-gutter); @for $i from 1 through $default-grid-columns { > .grid__col-#{$i} { @include grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter); } } } </code></pre> </div> </div> <h3>CSS</h3> <pre class="scrollable"> <code>.grid { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -1%; margin-right: -1%; } .grid > .grid__col-1 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 6.33333%; flex: 0 0 6.33333%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-2 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 14.66667%; flex: 0 0 14.66667%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-3 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 23%; flex: 0 0 23%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-4 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 31.33333%; flex: 0 0 31.33333%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-5 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 39.66667%; flex: 0 0 39.66667%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-6 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-7 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 56.33333%; flex: 0 0 56.33333%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-8 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 64.66667%; flex: 0 0 64.66667%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-9 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 73%; flex: 0 0 73%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-10 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 81.33333%; flex: 0 0 81.33333%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-11 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 89.66667%; flex: 0 0 89.66667%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-12 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 98%; flex: 0 0 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } </code></pre> <h2 id="Examples">Examples</h2> <div class="columns"> <div class="column"> <h3>Dart Sass</h3> <ul> <li><a href="example-dart-sass/example.html">Flexbox Grid Mixins Example</a></li> <li><a href="example-dart-sass/card.html">Cards Layout - Using Flexbox Grid Mixins</a></li> <li><a href="example-dart-sass/holy-grail-layout.html">Holy Grail Layout - Using Flexbox Grid Mixins</a></li> <li><a href="example-dart-sass/responsive.html">Responsive web design - Using Flexbox Grid Mixins</a></li> <li><a href="example-dart-sass/gap.html">Gap (grid-gap) css property</a></li> <li><a href="example-dart-sass/auto-margin.html">Auto margin</a></li> <li><a href="example-dart-sass/box-sizing.html">Box Sizing using Default Values</a></li> <li><a href="example-dart-sass/stack.html">Stack</a></li> <li><a href="example-dart-sass/grid-type.html">Grid Type</a></li> <li><a href="example-dart-sass/unit-set.html">Unit-Set Grid (Experimental stage)</a></li> <li><a href="example-dart-sass/test-stick-out.html">[Test] Stick Out Grid</a></li> </ul> </div> <div class="column"> <h3>LibSass</h3> <ul> <li><a href="example/example.html">Flexbox Grid Mixins Example</a></li> <li><a href="example/card.html">Cards Layout - Using Flexbox Grid Mixins</a></li> <li><a href="example/holy-grail-layout.html">Holy Grail Layout - Using Flexbox Grid Mixins</a></li> <li><a href="example/responsive.html">Responsive web design - Using Flexbox Grid Mixins</a></li> <li><a href="example/gap.html">Gap (grid-gap) css property</a></li> <li><a href="example/auto-margin.html">Auto margin</a></li> <li><a href="example/box-sizing.html">Box Sizing using Default Values</a></li> <li><a href="example/stack.html">Stack</a></li> <li><a href="example/grid-type.html">Grid Type</a></li> <li><a href="example/unit-set.html">Unit-Set Grid (Experimental stage)</a></li> <li><a href="example/test-stick-out.html">[Test] Stick Out Grid</a></li> </ul> </div> </div> <h2 id="Installation">Installation</h2> <h3>npm</h3> <pre> <code>$ npm install flexbox-grid-mixins --save-dev</code> </pre> <h3>Yarn</h3> <pre> <code>$ yarn add flexbox-grid-mixins --dev</code> </pre> <h3>Manual Install</h3> Include <code>dart-sass/_flexbox-grid-mixins.scss</code> or <code>sass/_flexbox-grid-mixins.scss</code> in the appropriate location in your project. <h2 id="Getting-Started">Getting Started</h2> <h3>1. Import Flexbox Grid Mixins in Sass/SCSS file</h3> <div class="columns"> <div class="column"> <h4>Dart Sass</h4> <pre><code>@use 'flexbox-grid-mixins';</code></pre> Example: import from node_modules <pre><code>@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';</code></pre> </div> <div class="column"> <h4>LibSass</h4> <pre><code>@import 'flexbox-grid-mixins';</code></pre> Example: import from node_modules <pre><code>@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';</code></pre> <p>Note: <a href="https://sass-lang.com/blog/libsass-is-deprecated" target="_blank">LibSass is Deprecated</a>. See <a href="https://sass-lang.com/blog/the-module-system-is-launched#future-plans" target="_blank">Future Plans</a>.</p> </div> </div> <h3>2. Define the grid container</h3> <div class="columns"> <div class="column"> <h4>Dart Sass</h4> <pre> <code>.grid { @include flexbox-grid-mixins.grid(); } </code></pre> </div> <div class="column"> <h4>LibSass</h4> <pre> <code>.grid { @include grid(); } </code></pre> </div> </div> <h3>3. Generate the grid columns</h3> <div class="columns"> <div class="column"> <h4>Dart Sass</h4> <pre> <code>.grid__col-3 { @include flexbox-grid-mixins.grid-col(3); } .grid__col-9 { @include flexbox-grid-mixins.grid-col(9); } </code></pre> </div> <div class="column"> <h4>LibSass</h4> <pre> <code>.grid__col-3 { @include grid-col(3); } .grid__col-9 { @include grid-col(9); } </code></pre> </div> </div> <h2 id="Mixins-Reference">Mixins Reference</h2> <h3 class="reference">Default Values (global settings)</h3> <table> <tr> <th>Default Values</th> <th>Default value</th> <th>Values</th> <th>Description</th> <th>Example</th> </tr> <tr> <td>$flexbox-grid-mixins-grid-type</td> <td>skeleton</td> <td>skeleton | margin-offset</td> <td>define the type of grid</td> <td class="example"><a href="example-dart-sass/grid-type.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$flexbox-grid-mixins-box-sizing</td> <td>border-box</td> <td>null | content-box | border-box</td> <td>define border-box property</td> <td class="example"><a href="example-dart-sass/box-sizing.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$flexbox-grid-mixins-stack</td> <td>margin-bottom</td> <td>unset | margin-top | margin-bottom | margin-both</td> <td>define the top or bottom or both margins of the columns</td> <td class="example"><a href="example-dart-sass/stack.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> </table> <h3 class="reference"><span class="small">@include</span> <span class="big">grid</span>($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null);</h3> <p>@include grid() define the grid container.</p> <table> <tr> <th>Arguments</th> <th>Default value</th> <th>Values</th> <th>Description</th> <th>Example</th> </tr> <tr> <td>$display</td> <td>flex</td> <td>flex | inline-flex</td> <td>generate a block-level or an inline-level grid container</td> <td></td> </tr> <tr> <td>$flex-direction</td> <td>null</td> <td>null | row | row-reverse | column | column-reverse</td> <td>define the main axis and the direction</td> <td class="example"><a href="example-dart-sass/example.html#grid-direction"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$flex-wrap</td> <td>null</td> <td>null | nowrap | wrap | wrap-reverse</td> <td>whether flex items are forced into a single line or can be wrapped onto multiple lines</td> <td class="example"><a href="example-dart-sass/example.html#wrap-alignment"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$flex-flow</td> <td>null</td> <td>null | [row | row-reverse | column | column-reverse] [nowrap | wrap | wrap-reverse]</td> <td>a shorthand for setting the flex-direction and flex-wrap properties</td> <td></td> </tr> <tr> <td>$justify-content</td> <td>null</td> <td>null | flex-start | flex-end | center | space-between | space-around | space-evenly</td> <td>defines space between and around content items along the main-axis of container</td> <td class="example"><a href="example-dart-sass/example.html#row-alignment"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$align-items</td> <td>null</td> <td>null | flex-start | flex-end | center | baseline | stretch</td> <td>defines space between and around flex items along the cross-axis of container</td> <td class="example"><a href="example-dart-sass/example.html#row-alignment"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$align-content</td> <td>null</td> <td>null | flex-start | flex-end | center | space-between | space-around | stretch</td> <td>defines space between and around content items along the cross-axis of their container</td> <td class="example"><a href="example-dart-sass/example.html#multi-line-alignment"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$gutter</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define gutters using margin CSS property. <code>null</code> is no margin of both ends of the grid. <code><percentage></code> generate a margin of both ends of the grid. <code><length></code> generate a margin of both ends of the grid (<code><length></code> is experimental stage).</td> <td class="example"><a href="example-dart-sass/example.html#flexbox-grid-mixins-example"><i class="fas fa-external-link-alt"></i></a> <a href="example-dart-sass/unit-set.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define gutters using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td class="example"><a href="example-dart-sass/gap.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$row-gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define row gutter using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap">row-gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td></td> </tr> <tr> <td>$column-gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define column gutter using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap">column-gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td></td> </tr> </table> <h3 class="reference"><span class="small">@include</span> <span class="big">grid-col</span>($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null, $gutter: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $condense: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null);</h3> <p>@include grid-col() generate the grid columns.</p> <p>The use of CSS calc() is experimental stage. If $col sets <code><number></code> or <code><width></code> and $gutter sets <code><length></code>, use CSS calc().</p> <table> <tr> <th>Arguments</th> <th>Default value</th> <th>Values</th> <th>Description</th> <th>Example</th> </tr> <tr> <td>$col</td> <td>null</td> <td>null | initial | <<a href="http://www.w3.org/TR/CSS21/syndata.html#numbers" target="_blank">number</a>> | auto | equal | none | positive | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" target="_blank">width</a>></td> <td>define columns. <code>null</code> is no set columns. <code><number></code> is number of columns. <code>initial</code>, <code>auto</code>, <code>equal</code>, <code>none</code>, <code>positive</code> are preset columns (Keyword values). <code>equal</code> as flex: 1. <code><width></code> is unit set columns (<code><width></code> is experimental stage. <code><breakpoint></code> is deprecated, use <code><initial></code> instead).</td> <td class="example"><a href="example-dart-sass/example.html#preset-grid-columns"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$grid-columns</td> <td>12</td> <td><<a href="http://www.w3.org/TR/CSS21/syndata.html#numbers" target="_blank">number</a>></td> <td>define the total number of columns in the grid.</td> <td class="example"><a href="example-dart-sass/example.html#grid-columns"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$col-offset</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>></td> <td><code><percentage></code> offset a width of columns.</td> <td></td> </tr> <tr> <td>$gutter</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define gutters using margin CSS property. <code>null</code> is no margin between columns. <code><percentage></code> generate a margin of between columns. <code><length></code> generate a margin of between columns (<code><length></code> is experimental stage).</td> <td class="example"><a href="example-dart-sass/example.html#flexbox-grid-mixins-example"><i class="fas fa-external-link-alt"></i></a> <a href="example-dart-sass/unit-set.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define gutters using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td class="example"><a href="example-dart-sass/gap.html"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$row-gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define row gutter using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap">row-gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td></td> </tr> <tr> <td>$column-gap</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#percentage-units" target="_blank">percentage</a>> | <<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>></td> <td>define column gutter using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap">column-gap CSS property</a>. <code>null</code> is no gaps between rows and columns. <code><percentage></code> generate a gaps between rows and columns. <code><length></code> generate a gaps between rows and columns.</td> <td></td> </tr> <tr> <td>$align-self</td> <td>null</td> <td>null | auto | flex-start | flex-end | center | baseline | stretch</td> <td>override the align-items value</td> <td class="example"><a href="example-dart-sass/example.html#items-row-alignment"><i class="fas fa-external-link-alt"></i></a> <a href="example-dart-sass/example.html#items-column-alignment"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$flex-grow</td> <td>0 *</td> <td><<a href="http://www.w3.org/TR/CSS21/syndata.html#numbers" target="_blank">number</a>></td> <td>grow relative to the rest of items in the grid. specifies what amount of space inside the flex container the item should take up.</td> <td></td> </tr> <tr> <td>$flex-shrink</td> <td>1 *</td> <td><<a href="http://www.w3.org/TR/CSS21/syndata.html#numbers" target="_blank">number</a>></td> <td>shrink relative to the rest of items in the grid</td> <td></td> </tr> <tr> <td>$flex-basis</td> <td>auto *</td> <td><<a href="http://www.w3.org/TR/CSS21/syndata.html#length-units" target="_blank">length</a>> | auto</td> <td>specifies the initial main size of a item</td> <td></td> </tr> <tr> <td>$order</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/syndata.html#numbers" target="_blank">integer</a>></td> <td>specifies the order in the grid container</td> <td class="example"><a href="example-dart-sass/example.html#row-order"><i class="fas fa-external-link-alt"></i></a> <a href="example-dart-sass/example.html#column-order"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$shorthand</td> <td>true</td> <td>true | false</td> <td>use flex property as shorthand by default. use three properties flex-basis, flex-grow and flex-shrink if <code>false</code>.</td> <td></td> </tr> <tr> <td>$condense</td> <td>null</td> <td>false | true</td> <td>remove the Stack (the top or bottom margin), if <code>true</code></td> <td class="example"><a href="example-dart-sass/example.html#condense"><i class="fas fa-external-link-alt"></i></a> <a href="example-dart-sass/stack.html#with-condense"><i class="fas fa-external-link-alt"></i></a></td> </tr> <tr> <td>$last-child</td> <td>false</td> <td><boolean></td> <td>adjust the last-child of the columns, if <code>true</code> and the $grid-type is <code>margin-offset</code></td> <td></td> </tr> <tr> <td>$width</td> <td>null</td> <td>null | <boolean> | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" target="_blank">width</a>> | auto</td> <td>specifies the width of an element</td> <td></td> </tr> <tr> <td>$max-width</td> <td>null</td> <td>null | <boolean> | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" target="_blank">width</a>> | auto</td> <td>sets the maximum width of an element</td> <td></td> </tr> <tr> <td>$min-width</td> <td>null</td> <td>null | <boolean> | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" target="_blank">width</a>> | auto</td> <td>sets the minimum width of an element</td> <td></td> </tr> <tr> <td>$height</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" target="_blank">height</a>></td> <td>specifies the height of an element</td> <td></td> </tr> <tr> <td>$max-height</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" target="_blank">height</a>></td> <td>sets the maximum height of an element</td> <td></td> </tr> <tr> <td>$min-height</td> <td>null</td> <td>null | <<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" target="_blank">height</a>></td> <td>sets the minimum height of an element</td> <td></td> </tr> </table> <p>* The same initial value as the property of Flexbox</p> <h2 id="Resources">Resources</h2> <ul> <li><a href="https://www.w3.org/TR/css-flexbox-1/" target="_blank">CSS Flexible Box Layout Module Level 1 </a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" target="_blank">CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN</a></li> <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a></li> <li><a href="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/" target="_blank">Holy Grail Layout - Solved by Flexbox</a></li> <li><a href="https://www.w3.org/TR/css-values/#calc-notation" target="_blank">Mathematical Expressions: calc()</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap" target="_blank">gap (grid-gap)</a></li> </ul> <h2 id="Contribute">Contribute</h2> See <a href="https://github.com/thingsym/flexbox-grid-mixins">GitHub - Flexbox Grid Mixins</a> <h2 id="License">License</h2> <p>The MIT License (MIT)</p> <p>Copyright (c) 2016 - 2022 Thingsym</p> </div> </body> </html>