archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add responsive example for flexbox display page

Browse Source
This commit is contained in:
Adam Wathan 2017-10-27 13:53:01 -04:00
parent f4bddeed56
commit 1eb0388fe6
1 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
docs/source/styles/flexbox/display.blade.md
View File

@ -6,15 +6,15 @@ category: "Flexbox"
# Display
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
<div class="text-xl text-slate-light">
Utilities for creating flex containers.
</div>
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.
<div class="subnav">
<a class="subnav-link" href="#responsive">Responsive</a>
</div>
## Flex
### Flex
Use `.flex` to create a block-level flex container:
@ -26,7 +26,7 @@ Use `.flex` to create a block-level flex container:
</div>
@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:
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@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')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="inline-flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="block bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="hidden bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')
<div class="none:flex sm:inline-flex md:block lg:hidden xl:flex ...">
<!-- ... -->
</div>
@endslot
@endcomponent