From 6e381737198f7a70029d8be594a43d4de77fd5b2 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 27 Oct 2017 14:17:40 -0400 Subject: [PATCH] Add responsive example to flex wrapping page --- docs/source/styles/flexbox/wrapping.blade.md | 95 ++++++++++++++++++-- 1 file changed, 87 insertions(+), 8 deletions(-) diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md index 41ffeb464..cfa125f2b 100644 --- a/docs/source/styles/flexbox/wrapping.blade.md +++ b/docs/source/styles/flexbox/wrapping.blade.md @@ -6,15 +6,15 @@ category: "Flexbox" # Flex Wrapping -
- Usage - Responsive - Customizing +
+ Utilities for controlling how flex items wrap.
-Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS. +
+ Responsive +
-

Don't wrap Default

+### Don't wrap Default Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: @@ -32,7 +32,7 @@ Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible item
@endcomponent -## Wrap normally +### Wrap normally Use `.flex-wrap` to allow flex items to wrap: @@ -50,7 +50,7 @@ Use `.flex-wrap` to allow flex items to wrap: @endcomponent -## Wrap reversed +### Wrap reversed Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @@ -67,3 +67,82 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: @endcomponent + +## Responsive + +To control how flex items wrap at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above. + +For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. + +@component('_partials.responsive-code-sample') +@slot('none') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endslot +@slot('sm') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endslot +@slot('md') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endslot +@slot('lg') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endslot +@slot('xl') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+@endslot +@slot('code') +
+ +
+@endslot +@endcomponent