From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Mon, 24 Oct 2016 11:23:56 -0400 Subject: Add documentation for col-{breakpoint}-auto --- docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..6fa04bf88 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %} +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +
+{% example html %} +
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+{% endexample %} +
+ ## Responsive flexbox Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. -- cgit v1.2.3 From abc9a526d525dad86e6fbe062161a66853227c78 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:03:45 -0700 Subject: Fixes #20498: Warn about flexbox bugs in our flex grid docs --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..4f456e273 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -27,6 +27,7 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. - Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From 26c33fa5ed0385d486d6a0ed5b79e9bae11dc055 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:49:57 -0700 Subject: unrelated change; bold that stuff to emphasize it --- docs/layout/flexbox-grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4412466f6..467c3030b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -26,8 +26,8 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. -- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). +- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, **flexbox requires a `.col-{breakpoint}` class for each tier.** +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From a26080c04723e23da352e8115a108130725faff2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:50:25 -0700 Subject: rework flex grid autolayout docs Adds clearer headings to each section, reworks some copy to be more direct. --- docs/layout/flexbox-grid.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs/layout/flexbox-grid.md') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 467c3030b..a26314cd6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -33,7 +33,11 @@ Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible. +When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and every column will be the same width. + +### Equal-width + +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
{% example html %} @@ -61,6 +65,8 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %}
+### Setting one column width + Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
@@ -92,7 +98,9 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %}
-Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. +### Variable width content + +Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
{% example html %} -- cgit v1.2.3