diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 0acca4fadb..9b6add5c46 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 %}