From 62a129184d144de67349ff300a315c42dadc8712 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2016 19:15:58 -0700 Subject: Add vertical-align utilities - Adds six new utils for vertical-align property - Documents the additional classes in the utils docs --- docs/utilities/vertical-align.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 docs/utilities/vertical-align.md (limited to 'docs/utilities') diff --git a/docs/utilities/vertical-align.md b/docs/utilities/vertical-align.md new file mode 100644 index 000000000..8e03e58a6 --- /dev/null +++ b/docs/utilities/vertical-align.md @@ -0,0 +1,33 @@ +--- +layout: docs +title: Vertical alignment +group: utilities +--- + +Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements. + +Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. + +With inline elements: + +{% example html %} +baseline +top +middle +bottom +text-top +text-bottom +{% endexample %} + +With table cells: + +{% example html %} + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
+{% endexample %} -- cgit v1.2.3 From 2e4fab63de2a476c11df12388f67b234732a2830 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 18 Oct 2016 19:31:47 -0700 Subject: fix markup validation --- docs/utilities/vertical-align.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/vertical-align.md b/docs/utilities/vertical-align.md index 8e03e58a6..09ae115b0 100644 --- a/docs/utilities/vertical-align.md +++ b/docs/utilities/vertical-align.md @@ -23,11 +23,15 @@ With table cells: {% example html %} - - - - - - + + + + + + + + + +
baselinetopmiddlebottomtext-toptext-bottom
baselinetopmiddlebottomtext-toptext-bottom
{% endexample %} -- cgit v1.2.3 From 8e888796a64ba89b69fb1af7b8e295d050b17ca1 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Fri, 21 Oct 2016 09:36:09 +1100 Subject: Fix documentation for all-side spacing classes. --- docs/utilities/spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 1ee1ab7fb..f44d468f9 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -21,7 +21,7 @@ Where *sides* is one of: * `r` - for classes that set `margin-right` or `padding-right` * `x` - for classes that set both `*-left` and `*-right` * `y` - for classes that set both `*-top` and `*-bottom` -* `a` - for classes that set a `margin` or `padding` on all 4 sides of the element +* blank - for classes that set a `margin` or `padding` on all 4 sides of the element Where *size* is one of: -- cgit v1.2.3 From f734814f6ba6c86673f771b073425ca6f7f72693 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:13:05 -0700 Subject: Make spacer utils responsive (#20926) * make spacer utils responsive by grid tier * update scale to add two levels, document them * change responsive spacing utils to avoid the xs abbreviation in the class name for that tier * update code snippet to match source * update usage in our docs * linter * docs updates --- docs/utilities/spacing.md | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index f44d468f9..53a6ab538 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -4,9 +4,13 @@ title: Spacing group: utilities --- -Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`. +Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. -The classes are named using the format: `{property}{sides}-{size}` +## Notation + +Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. + +The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`. Where *property* is one of: @@ -26,12 +30,16 @@ Where *sides* is one of: Where *size* is one of: * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0` -* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y` -* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` -* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` +* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25` +* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5` +* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y` +* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5` +* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3` (You can add more sizes by adding entries to the `$spacers` Sass map variable.) +## Examples + Here are some representative examples of these classes: {% highlight scss %} @@ -40,16 +48,16 @@ Here are some representative examples of these classes: } .ml-1 { - margin-left: $spacer-x !important; + margin-left: ($spacer-x * .25) !important; } .px-2 { - padding-left: ($spacer-x * 1.5) !important; - padding-right: ($spacer-x * 1.5) !important; + padding-left: ($spacer-x * .5) !important; + padding-right: ($spacer-x * .5) !important; } .p-3 { - padding: ($spacer-y * 3) ($spacer-x * 3) !important; + padding: $spacer-y $spacer-x !important; } {% endhighlight %} -- cgit v1.2.3 From ffaad0a819c6cf1e21d9a9d313673f9d7a260584 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:27:56 -0700 Subject: Responsive display utilities (#20934) * Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name * make floats use the same format, add float-none mixin --- docs/utilities/clearfix.md | 4 ++-- docs/utilities/responsive-helpers.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index e63ba3cda..d1327566c 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md index 13ae8a56d..35e7fcf2f 100644 --- a/docs/utilities/responsive-helpers.md +++ b/docs/utilities/responsive-helpers.md @@ -49,9 +49,9 @@ These utility classes float an element to the left or right, or disable floating Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available. {% example html %} -
Float left on all viewport sizes

-
Float right on all viewport sizes

-
Don't float on all viewport sizes

+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

-- cgit v1.2.3 From ab54151ed3faa9b27c6a9227a9bcb667719e1c5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Nov 2016 11:26:37 -0800 Subject: Fixes #21179: docs typos on pull/float action --- docs/utilities/clearfix.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index d1327566c..a023a79aa 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} -- cgit v1.2.3 From 8d3f0995d12e11ba440d8bb03799f3f1349aec57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 23 Nov 2016 11:28:17 -0800 Subject: Fixes #21123: More specific definition of fixed-width block level for .mx-auto --- docs/utilities/spacing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 53a6ab538..91dab4f02 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -62,7 +62,7 @@ Here are some representative examples of these classes: {% endhighlight %} ### Horizontal centering -Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`. +Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
-- cgit v1.2.3 From 83c8bfa30d4d906ff7f2e37314e99e1098eb9bce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Nov 2016 14:01:06 -0800 Subject: Fixes #21195: Add more table of contents to pages with longer contents --- docs/utilities/spacing.md | 5 +++++ docs/utilities/typography.md | 5 +++++ 2 files changed, 10 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md index 91dab4f02..0a5132941 100644 --- a/docs/utilities/spacing.md +++ b/docs/utilities/spacing.md @@ -6,6 +6,11 @@ group: utilities Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Notation Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation. diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index c5628dad1..7db133d05 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -6,6 +6,11 @@ group: utilities The following utilities can be used to add additional styles to texts. +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + ## Text alignment Easily realign text to components with text alignment classes. -- cgit v1.2.3 From 095ea0b795a80530f7b5bd114fdd07c46893bfcb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 16:44:16 -0800 Subject: Border utilities (#21213) * grunt * add border utilities for removing borders * clean up comments * add basic border docs * docs styles for border utils --- docs/utilities/borders.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index b47d95c97..0088a2827 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -6,6 +6,20 @@ group: utilities Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. +## Border + +Add classes to an element to remove all borders or some borders. + +
+{% example html %} + + + + + +{% endexample %} +
+ ## Border-radius Add classes to an element to easily round its corners. -- cgit v1.2.3 From dc52029beaff899242bdff8e9c00a932959609ba Mon Sep 17 00:00:00 2001 From: Ken Dale Date: Sat, 26 Nov 2016 19:47:53 -0500 Subject: Add .rounded-0 utility class (#21214) * Add rounded-0 class --- docs/utilities/borders.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index 0088a2827..1eb716c1f 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -25,12 +25,13 @@ Add classes to an element to remove all borders or some borders. Add classes to an element to easily round its corners.
- Example rounded image - Example top rounded image - Example right rounded image - Example bottom rounded image - Example left rounded image - Completely round image + Example rounded image + Example top rounded image + Example right rounded image + Example bottom rounded image + Example left rounded image + Completely round image + Example non-rounded image (overrides rounding applied elsewhere)
{% highlight html %} @@ -40,4 +41,5 @@ Add classes to an element to easily round its corners. ... ... ... +... {% endhighlight %} -- cgit v1.2.3 From b1e8d60348ab84895b7b722487a03264a53aedfb Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sat, 26 Nov 2016 21:33:46 -0700 Subject: Remove 'xs' from text utilities (#21217) --- docs/utilities/typography.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 7db133d05..42b61131e 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} -

Left aligned text on all viewport sizes.

-

Center aligned text on all viewport sizes.

-

Right aligned text on all viewport sizes.

+

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

-- cgit v1.2.3 From 585516db95c6528c396ef33c59f99c4f8bb8b42e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 16:31:31 -0800 Subject: Add max-width 100% and max-height 100% utilities (#21221) --- docs/utilities/sizing-and-positioning.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 8881b177b..670b6f188 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} -Width = 100% +Width 100% {% endexample %} {% example html %} @@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
Full height
{% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +Max-width 100% +{% endexample %} + +{% example html %} +
+
Max-height 100%
+
+{% endexample %} -- cgit v1.2.3 From 869bd23937448fdcbae37c1062d373ef3ae7722a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 17:05:29 -0800 Subject: Update clearfix mixin (#21224) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update clearfix to use block instead of table display (also reorder properties for linting) * update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR) --- docs/utilities/clearfix.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index a023a79aa..49410df09 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes {% highlight scss %} // Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { +@mixin clearfix() { + &::after { + display: block; + content: ""; clear: both; } } -- cgit v1.2.3 From a3567a119df3434d879f766e18ba452b01871d37 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Mon, 5 Dec 2016 11:44:37 +1100 Subject: Documentation navigation fixes. (#21288) * Make /utilities/ redirect to /utilities/borders/. * Rewrite sidebar active link logic to ensure superstrings are not selected. --- docs/utilities/borders.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/utilities') diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md index 1eb716c1f..1f092c36a 100644 --- a/docs/utilities/borders.md +++ b/docs/utilities/borders.md @@ -2,6 +2,7 @@ layout: docs title: Borders group: utilities +redirect_from: "/utilities/" --- Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. -- cgit v1.2.3 From d4217ea137c534dbbd7d32f58c5f700c63d5332c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 16:37:18 -0800 Subject: New width and height utils Adding 25%, 50%, and 75% to the mix for later use with cards --- docs/utilities/sizing-and-positioning.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 670b6f188..9e3f35ca1 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,15 +21,21 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. +Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %} -Width 100% +
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
{% endexample %} {% example html %}
-
Full height
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
{% endexample %} -- cgit v1.2.3 From f297282833c2af308783c527edaf8d6a7fd93917 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 21:18:33 -0800 Subject: typo --- docs/utilities/sizing-and-positioning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 9e3f35ca1..796eb8305 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,7 +21,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall (relative to its parent) our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. +Easily make an element as wide or as tall (relative to its parent) wit our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %}
Width 25%
-- cgit v1.2.3 From 4b62a9390682feac7c5d1e260fd968ebaa7ded7c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 21:20:47 -0800 Subject: ugh --- docs/utilities/sizing-and-positioning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/utilities') diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 796eb8305..a6de778ca 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -21,7 +21,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v ## Width and height -Easily make an element as wide or as tall (relative to its parent) wit our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. +Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for `25%`, `50%`, `75%`, and `100%`. {% example html %}
Width 25%
-- cgit v1.2.3 From 5464f4ab7e1ea5e6ef841609dbeb04d0436655db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:48:03 -0800 Subject: Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time. --- docs/utilities/flexbox.md | 196 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 docs/utilities/flexbox.md (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md new file mode 100644 index 000000000..324bfa2f0 --- /dev/null +++ b/docs/utilities/flexbox.md @@ -0,0 +1,196 @@ +--- +layout: docs +title: Flexbox +group: utilities +--- + +Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Enable flex behaviors + +Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. Choose from the following options. + +| Class | property: value; | Description | +| --- | --- | --- | +| `.d-flex` | `display: flex;` | Creates a block-level element using the flexbox model. | +| `.d-inline-flex` | `display: inline-flex;` | Creates an inline-level element using the flexbox model. | + +{% example html %} +
I'm a flexbox container!
+{% endexample %} + +{% example html %} +
I'm an inline flexbox container!
+{% endexample %} + +Responsive variations also exist for `.d-flex` and `.d-inline-flex`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .d{{ bp.abbr }}-flex + + Sets display: flex; on viewports {{ bp.min-width }} wide and up +
+ .d{{ bp.abbr }}-inline-flex + + Sets display: inline-flex; on viewports {{ bp.min-width }} wide and up +
+ +## Direction + +Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). + +Use `.flex-row` to set a horizontal direction. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Use `.flex-column` to set a vertical direction. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-row` and `.flex-column`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .flex{{ bp.abbr }}-row + + Sets flex-direction: row; on viewports {{ bp.min-width }} wide and up +
+ .flex{{ bp.abbr }}-column + + Sets flex-direction: column; on viewports {{ bp.min-width }} wide and up +
+ +## Wrap + +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. + + + + + + + + + + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + {% for bp in site.data.breakpoints %} + + + + + {% endfor %} + +
ClassDescription
+ .flex{{ bp.abbr }}-nowrap + + Sets flex-wrap: nowrap; on viewports {{ bp.min-width }} wide and up +
+ .flex{{ bp.abbr }}-wrap + + Sets flex-wrap: wrap; on viewports {{ bp.min-width }} wide and up +
-- cgit v1.2.3 From feb445376b98bf04ab3e7d294b200369e3c90f79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:56:07 -0800 Subject: try out alt responsive variation lists --- docs/utilities/flexbox.md | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 324bfa2f0..a05c117e7 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -13,12 +13,7 @@ Quickly manage the layout, alignment, and sizing of grid columns, navigation, co ## Enable flex behaviors -Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. Choose from the following options. - -| Class | property: value; | Description | -| --- | --- | --- | -| `.d-flex` | `display: flex;` | Creates a block-level element using the flexbox model. | -| `.d-inline-flex` | `display: inline-flex;` | Creates an inline-level element using the flexbox model. | +Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties. {% example html %}
I'm a flexbox container!
@@ -30,7 +25,11 @@ Apply `display` utilities to create a flexbox container and transform **direct c Responsive variations also exist for `.d-flex` and `.d-inline-flex`. - +{% for bp in site.data.breakpoints %} +- `.d{{ bp.abbr }}-flex` +- `.d{{ bp.abbr }}-inline-flex`{% endfor %} + +
@@ -87,7 +86,11 @@ Use `.flex-column` to set a vertical direction. Responsive variations also exist for `.flex-row` and `.flex-column`. - +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-row` +- `.flex{{ bp.abbr }}-column`{% endfor %} + +
@@ -164,7 +167,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. - +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-nowrap` +- `.flex{{ bp.abbr }}-wrap`{% endfor %} + +
-- cgit v1.2.3 From 90aa8a28a28a60d14e747cb1afe0531ab7107db7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 11:56:27 -0800 Subject: remove the table classes in favor of lists --- docs/utilities/flexbox.md | 93 ----------------------------------------------- 1 file changed, 93 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index a05c117e7..6b3d87050 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -29,37 +29,6 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. - `.d{{ bp.abbr }}-flex` - `.d{{ bp.abbr }}-inline-flex`{% endfor %} - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - - ## Direction Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). @@ -90,37 +59,6 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - - ## Wrap Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. @@ -170,34 +108,3 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` - `.flex{{ bp.abbr }}-wrap`{% endfor %} - - - - - - - - - - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - {% for bp in site.data.breakpoints %} - - - - - {% endfor %} - - -- cgit v1.2.3 From 4024dc7a5294e6bc37d31970de4f3a9718f4a728 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 12:40:55 -0800 Subject: indentation --- docs/utilities/flexbox.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 6b3d87050..2acd1fed4 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -65,21 +65,21 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( {% example html %}
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
{% endexample %} -- cgit v1.2.3 From 463e8bee76aa49cc443bf87120d2bee49b329146 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 12:54:01 -0800 Subject: document justify-content and align-items utils --- docs/utilities/flexbox.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 2acd1fed4..bc2a9cdb0 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -108,3 +108,68 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` - `.flex{{ bp.abbr }}-wrap`{% endfor %} + +## Justify content + +Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + + +## Align items + +Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} -- cgit v1.2.3 From 7d47a0115864b2a5e429f52470323c79067d8c5e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:15:55 -0800 Subject: change presentation of those utils docs --- docs/utilities/flexbox.md | 103 ++++++++++++++++++++++++++++++---------------- 1 file changed, 68 insertions(+), 35 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index bc2a9cdb0..935922fb9 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -113,49 +113,82 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
-
-
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} + +{% highlight html %} +
...
+
...
+
...
+
...
+
...
+{% endhighlight %} ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+ +{% highlight html %} +
...
+
...
+
...
+
...
+
...
+{% endhighlight %}
Flex item
-- cgit v1.2.3 From 75e756dfef1b4d99200b55f08f0ef942e074401e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:16:13 -0800 Subject: document align-content utils --- docs/utilities/flexbox.md | 155 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 142 insertions(+), 13 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 935922fb9..59d732f1c 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -189,20 +189,149 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
...
{% endhighlight %} + +## Align content + +Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. + +**Heads up!** This property has no affect on single rows of flex items. + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+{% highlight html %} +
+ ...
-
-
Flex item
-
Flex item
-
Flex item
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-
-
Flex item
-
Flex item
-
Flex item
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} +{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
...
+{% endhighlight %} -- cgit v1.2.3 From 378aa6667bfe2ccc9f14cd3f767e8b24afc06bf5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:23:11 -0800 Subject: align-self docs --- docs/utilities/flexbox.md | 43 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 59d732f1c..8359bbe93 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -149,10 +149,9 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
{% endhighlight %} - ## Align items -Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. +Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
@@ -190,6 +189,46 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
{% endhighlight %} +## Align self + +Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). + +
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+ +{% highlight html %} +
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+
Aligned flex item
+{% endhighlight %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. -- cgit v1.2.3 From 6fb2c18e141109fc8edaec7bfd376a33040ccf57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 12:33:42 -0800 Subject: add order docs --- docs/utilities/flexbox.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 8359bbe93..0c0cd5eed 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -229,6 +229,18 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +## Order + +Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed. + +{% example html %} +
+
First flex item
+
Second flex item
+
Third flex item
+
+{% endexample %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. -- cgit v1.2.3 From f2f489c83790fcdeaf2fddd7773970f9fb0b2f8a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 17:46:35 -0800 Subject: stub out some docs --- docs/utilities/flexbox.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0c0cd5eed..67bec7649 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,6 +59,19 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} +## Auto margins + +Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + + ## Wrap Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. -- cgit v1.2.3 From f99d1796904cb0a28a926963dd5b8407cbbff72e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 18:03:16 -0800 Subject: reorder docs --- docs/utilities/flexbox.md | 125 +++++++++++++++++++++++----------------------- 1 file changed, 62 insertions(+), 63 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 67bec7649..eff4fb190 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -59,69 +59,6 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. - `.flex{{ bp.abbr }}-row` - `.flex{{ bp.abbr }}-column`{% endfor %} -## Auto margins - -Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - - -## Wrap - -Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
-{% endexample %} - -Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. - -{% for bp in site.data.breakpoints %} -- `.flex{{ bp.abbr }}-nowrap` -- `.flex{{ bp.abbr }}-wrap`{% endfor %} - ## Justify content Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. @@ -242,6 +179,68 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +## Auto margins + +Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +## Wrap + +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. + +{% for bp in site.data.breakpoints %} +- `.flex{{ bp.abbr }}-nowrap` +- `.flex{{ bp.abbr }}-wrap`{% endfor %} + ## Order Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed. -- cgit v1.2.3 From 4ca1a7f0773d1892723efc09e2ccb064dde309f5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Dec 2016 18:11:57 -0800 Subject: document it all, add align items examples --- docs/utilities/flexbox.md | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index eff4fb190..6686b5d59 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -181,14 +181,42 @@ Use `align-self` utilities on flexbox items to individually change their alignme ## Auto margins -Flexbox can do some pretty awesome things when you mix `justify-content` with `margin-right: auto` or `margin-left: auto` on a particular flex item. For example, we can move all flex items to the right, but keep one on the left like so. +Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. + +### With justify-content + +Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`. {% example html %} -
+
Flex item
Flex item
Flex item
+ +
+
Flex item
+
Flex item
+
Flex item
+
+{% endexample %} + +### With align-items + +Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. + +{% example html %} +
+
Flex item
+
Flex item
+
Flex item
+
+ +
+
Flex item
+
Flex item
+
Flex item
+
{% endexample %} ## Wrap -- cgit v1.2.3 From d3cf4759b093befc78e996e26f2037c4f20db86b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2016 13:17:50 -0800 Subject: follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse --- docs/utilities/flexbox.md | 148 +++++++++++++++++++++++++++++++--------------- 1 file changed, 100 insertions(+), 48 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 6686b5d59..0acca4fad 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -33,23 +33,33 @@ Responsive variations also exist for `.d-flex` and `.d-inline-flex`. Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). -Use `.flex-row` to set a horizontal direction. +Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} -Use `.flex-column` to set a vertical direction. +Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side. {% example html %} -
-
Flex item
-
Flex item
-
Flex item
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
{% endexample %} @@ -57,7 +67,9 @@ Responsive variations also exist for `.flex-row` and `.flex-column`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-row` -- `.flex{{ bp.abbr }}-column`{% endfor %} +- `.flex{{ bp.abbr }}-row-reverse` +- `.flex{{ bp.abbr }}-column` +- `.flex{{ bp.abbr }}-column-reverse`{% endfor %} ## Justify content @@ -221,53 +233,93 @@ Similarly, move one flex item to the top or bottom of a container by mixing `ali ## Wrap -Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, or enable wrapping with `.flex-wrap`. +Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
-{% endexample %} +{% highlight html %} +
+ ... +
+{% endhighlight %} -{% example html %} -
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
-
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
+ ...
+{% endhighlight %} + +
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+{% highlight html %} +
+ ... +
+{% endhighlight %} + + +{% example html %} {% endexample %} Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` -- `.flex{{ bp.abbr }}-wrap`{% endfor %} +- `.flex{{ bp.abbr }}-wrap` +- `.flex{{ bp.abbr }}-wrap-reverse`{% endfor %} ## Order -- cgit v1.2.3 From 8de5730c87cd87ecdb1c6de24924f3362d70d911 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2016 13:23:07 -0800 Subject: more flexbox docs --- docs/utilities/flexbox.md | 47 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) (limited to 'docs/utilities') diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0acca4fad..9b6add5c4 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -63,7 +63,7 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
{% endexample %} -Responsive variations also exist for `.flex-row` and `.flex-column`. +Responsive variations also exist for `flex-direction`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-row` @@ -111,6 +111,15 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
...
{% endhighlight %} +Responsive variations also exist for `justify-content`. + +{% for bp in site.data.breakpoints %} +- `.justify-content{{ bp.abbr }}-start` +- `.justify-content{{ bp.abbr }}-end` +- `.justify-content{{ bp.abbr }}-center` +- `.justify-content{{ bp.abbr }}-between` +- `.justify-content{{ bp.abbr }}-around`{% endfor %} + ## Align items Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -151,6 +160,15 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
...
{% endhighlight %} +Responsive variations also exist for `align-items`. + +{% for bp in site.data.breakpoints %} +- `.align-items{{ bp.abbr }}-start` +- `.align-items{{ bp.abbr }}-end` +- `.align-items{{ bp.abbr }}-center` +- `.align-items{{ bp.abbr }}-baseline` +- `.align-items{{ bp.abbr }}-stretch`{% endfor %} + ## Align self Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default). @@ -191,6 +209,15 @@ Use `align-self` utilities on flexbox items to individually change their alignme
Aligned flex item
{% endhighlight %} +Responsive variations also exist for `align-self`. + +{% for bp in site.data.breakpoints %} +- `.align-self{{ bp.abbr }}-start` +- `.align-self{{ bp.abbr }}-end` +- `.align-self{{ bp.abbr }}-center` +- `.align-self{{ bp.abbr }}-baseline` +- `.align-self{{ bp.abbr }}-stretch`{% endfor %} + ## Auto margins Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. @@ -314,7 +341,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( {% example html %} {% endexample %} -Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`. +Responsive variations also exist for `flex-wrap`. {% for bp in site.data.breakpoints %} - `.flex{{ bp.abbr }}-nowrap` @@ -333,6 +360,13 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
{% endexample %} +Responsive variations also exist for `order`. + +{% for bp in site.data.breakpoints %} +- `.order{{ bp.abbr }}-first` +- `.order{{ bp.abbr }}-last` +- `.order{{ bp.abbr }}-unordered`{% endfor %} + ## Align content Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. @@ -478,3 +512,12 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe {% highlight html %}
...
{% endhighlight %} + +Responsive variations also exist for `align-content`. + +{% for bp in site.data.breakpoints %} +- `.align-content{{ bp.abbr }}-start` +- `.align-content{{ bp.abbr }}-end` +- `.align-content{{ bp.abbr }}-center` +- `.align-content{{ bp.abbr }}-around` +- `.align-content{{ bp.abbr }}-stretch`{% endfor %} -- cgit v1.2.3