diff options
| author | Mark Otto <[email protected]> | 2016-12-23 13:16:13 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-24 14:21:04 -0800 |
| commit | 75e756dfef1b4d99200b55f08f0ef942e074401e (patch) | |
| tree | 35377c16f041edac21e9082a68398fe56a19efea /docs/utilities | |
| parent | 7d47a0115864b2a5e429f52470323c79067d8c5e (diff) | |
| download | bootstrap-75e756dfef1b4d99200b55f08f0ef942e074401e.tar.xz bootstrap-75e756dfef1b4d99200b55f08f0ef942e074401e.zip | |
document align-content utils
Diffstat (limited to 'docs/utilities')
| -rw-r--r-- | docs/utilities/flexbox.md | 155 |
1 files changed, 142 insertions, 13 deletions
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 <div class="d-flex align-items-baseline">...</div> <div class="d-flex align-items-stretch">...</div> {% 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. + +<div class="bd-example"> + <div class="d-flex align-content-start flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> -<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> +{% highlight html %} +<div class="d-flex align-content-start flex-wrap"> + ... </div> -<div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> +{% endhighlight %} + +<div class="bd-example"> + <div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> -<div class="d-flex align-items-stretch bd-highlight" style="height: 100px"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> +{% highlight html %} +<div class="d-flex align-content-end flex-wrap">...</div> +{% endhighlight %} + +<div class="bd-example"> + <div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> </div> -{% endexample %} +{% highlight html %} +<div class="d-flex align-content-center flex-wrap">...</div> +{% endhighlight %} + +<div class="bd-example"> + <div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> +</div> +{% highlight html %} +<div class="d-flex align-content-between flex-wrap">...</div> +{% endhighlight %} + +<div class="bd-example"> + <div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> +</div> +{% highlight html %} +<div class="d-flex align-content-around flex-wrap">...</div> +{% endhighlight %} + +<div class="bd-example"> + <div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px"> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + <div class="p-2 bd-highlight">Flex item</div> + </div> +</div> +{% highlight html %} +<div class="d-flex align-content-stretch flex-wrap">...</div> +{% endhighlight %} |