From 1eb0388fe6ad8fc8da6a210341ed7369d97c960d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 27 Oct 2017 13:53:01 -0400 Subject: [PATCH] Add responsive example for flexbox display page --- docs/source/styles/flexbox/display.blade.md | 63 ++++++++++++++++++--- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/docs/source/styles/flexbox/display.blade.md b/docs/source/styles/flexbox/display.blade.md index d1aec0e23..ee1f49096 100644 --- a/docs/source/styles/flexbox/display.blade.md +++ b/docs/source/styles/flexbox/display.blade.md @@ -6,15 +6,15 @@ category: "Flexbox" # Display -
- Usage - Responsive - Customizing +
+ Utilities for creating flex containers.
-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 +
-## Flex +### Flex Use `.flex` to create a block-level flex container: @@ -26,7 +26,7 @@ Use `.flex` to create a block-level flex container:
@endcomponent -## Inline flex +### Inline flex Use `.inline-flex` to create an inline flex container: @@ -37,3 +37,52 @@ Use `.inline-flex` to create an inline flex container:
3
@endcomponent + +## Responsive + +To control the display property of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` 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') + +@endslot +@slot('xl') +
+
1
+
2
+
3
+
+@endslot +@slot('code') +
+ +
+@endslot +@endcomponent