From 75e756dfef1b4d99200b55f08f0ef942e074401e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Dec 2016 13:16:13 -0800 Subject: [PATCH] document align-content utils --- docs/utilities/flexbox.md | 155 ++++++++++++++++++++++++++++++++++---- 1 file changed, 142 insertions(+), 13 deletions(-) diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 935922fb90..59d732f1c7 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 %}