From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 08:23:52 +0000 (-0800)
Subject: Update grid mixins code snippets in the docs to include flexbox changes
X-Git-Tag: v4.0.0-alpha.3~317
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=29dcf9ac623c5ae13bd3d582b9e0b369ba7a3cc6;p=thirdparty%2Fbootstrap.git

Update grid mixins code snippets in the docs to include flexbox changes
---

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index c318f5330a..f2427137f1 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -164,23 +164,40 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 {% highlight scss %}
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  } @else {
+    @include clearfix();
+  }
   margin-left:  ($gutter / -2);
   margin-right: ($gutter / -2);
-  @include clearfix();
 }
 
 // Make the element grid-ready (applying everything but the width)
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  float: left;
+  @if $enable-flex {
+    flex: 1;
+  } @else {
+    float: left;
+  }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
-// Set a width (to be used in or out of media queries)
-@mixin make-col-span($columns) {
-  width: percentage(($columns / $grid-columns));
+@mixin make-col-span($size, $columns: $grid-columns) {
+  // Set a width (to be used in or out of media queries)
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($size / $columns);
+  } @else {
+    width: percentage($size / $columns);
+  }
 }
 
 // Get fancy by offsetting, or changing the sort order