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 align items example

Browse Source
This commit is contained in:
Adam Wathan 2017-10-27 13:32:15 -04:00
parent 0aee1a59f2
commit cd83c7cfb5
2 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/source/styles/flexbox/align-content.blade.md
View File

@ -138,7 +138,7 @@ Use `.content-around` to distribute lines in a flex container such that there is
## Responsive
To apply an align content utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:content-around` to an element would apply the `content-around` utility at medium screen sizes and above.
To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.

66
docs/source/styles/flexbox/align-items.blade.md
View File

@ -6,15 +6,16 @@ category: "Flexbox"
# Align Items
<div class="text-xl text-slate-light">
Utilities for controlling how flex items are positioned along a container's cross axis.
</div>
<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>
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.
<h2>Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
Use `.items-stretch` to stretch items to fill the flex container's cross axis:
@ -26,7 +27,7 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis:
</div>
@endcomponent
## Start
### Start
Use `.items-start` to align items to the start of the flex container's cross axis:
@ -38,7 +39,7 @@ Use `.items-start` to align items to the start of the flex container's cross axi
</div>
@endcomponent
## Center
### Center
Use `.items-center` to align items along the center of the flex container's cross axis:
@ -50,7 +51,7 @@ Use `.items-center` to align items along the center of the flex container's cros
</div>
@endcomponent
## End
### End
Use `.items-end` to align items to the end of the flex container's cross axis:
@ -63,7 +64,7 @@ Use `.items-end` to align items to the end of the flex container's cross axis:
@endcomponent
## Baseline
### Baseline
Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
@ -74,3 +75,52 @@ Use `.items-baseline` to align items along the flex container's cross axis such
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endcomponent
## Responsive
To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` 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 items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('sm')
<div class="flex items-start bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('md')
<div class="flex items-center bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('lg')
<div class="flex items-end bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('xl')
<div class="flex items-baseline bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('code')
<div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline">
<!-- ... -->
</div>
@endslot
@endcomponent