wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add subheadings for each utility

Browse source
This commit is contained in:
Adam Wathan 2017-10-23 15:31:31 -04:00
parent 233ac03b1d
commit b0b4ac71d0
1 changed files with 128 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

165
docs/source/styles/flexbox.blade.md
View file

@ -13,7 +13,9 @@ title: "Flexbox"
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.
## Flex Containers
## Display
### Flex
Use `.flex` to create a block-level flex container:
@ -25,6 +27,8 @@ Use `.flex` to create a block-level flex container:
</div>
@endcomponent
### Inline flex
Use `.inline-flex` to create an inline flex container:
@component('_partials.code-sample')
@ -35,7 +39,11 @@ Use `.inline-flex` to create an inline flex container:
</div>
@endcomponent
### Flex Direction
---
## Flex Direction
### Row
Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*:
@ -47,6 +55,7 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
</div>
@endcomponent
### Row reversed
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
@ -58,6 +67,7 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire
</div>
@endcomponent
### Column
Use `.flex-col` to position flex items vertically:
@ -69,6 +79,7 @@ Use `.flex-col` to position flex items vertically:
</div>
@endcomponent
### Column reversed
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
@ -80,7 +91,11 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct
</div>
@endcomponent
### Flex Wrap
---
## Flex Wrapping
### No wrapping
Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*:
@ -98,6 +113,8 @@ Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the defaul
</div>
@endcomponent
### Wrap normally
Use `.flex-wrap` to allow flex items to wrap:
@component('_partials.code-sample')
@ -114,6 +131,8 @@ Use `.flex-wrap` to allow flex items to wrap:
</div>
@endcomponent
### Wrap reversed
Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
@component('_partials.code-sample')
@ -130,7 +149,11 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
</div>
@endcomponent
### Justify Content
---
## Justify Content
### Start
Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*:
@ -142,6 +165,8 @@ Use `.justify-start` to justify items against the start of the flex container's
</div>
@endcomponent
### End
Use `.justify-end` to justify items against the end of the flex container's main axis:
@component('_partials.code-sample')
@ -152,6 +177,8 @@ Use `.justify-end` to justify items against the end of the flex container's main
</div>
@endcomponent
### Center
Use `.justify-center` to justify items along the center of the flex container's main axis:
@component('_partials.code-sample')
@ -162,6 +189,8 @@ Use `.justify-center` to justify items along the center of the flex container's
</div>
@endcomponent
### Space between
Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item:
@component('_partials.code-sample')
@ -172,6 +201,8 @@ Use `.justify-between` to justify items along the flex container's main axis suc
</div>
@endcomponent
### Space around
Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item:
@component('_partials.code-sample')
@ -182,7 +213,11 @@ Use `.justify-around` to justify items along the flex container's main axis such
</div>
@endcomponent
### Align Items
---
## Align Items
### Stretch
Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*:
@ -194,6 +229,8 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis *(
</div>
@endcomponent
### Start
Use `.items-start` to align items to the start of the flex container's cross axis:
@component('_partials.code-sample')
@ -204,6 +241,8 @@ Use `.items-start` to align items to the start of the flex container's cross axi
</div>
@endcomponent
### End
Use `.items-end` to align items to the end of the flex container's cross axis:
@component('_partials.code-sample')
@ -214,6 +253,8 @@ Use `.items-end` to align items to the end of the flex container's cross axis:
</div>
@endcomponent
### Center
Use `.items-center` to align items along the center of the flex container's cross axis:
@component('_partials.code-sample')
@ -224,6 +265,8 @@ Use `.items-center` to align items along the center of the flex container's cros
</div>
@endcomponent
### Baseline
Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
@component('_partials.code-sample')
@ -234,7 +277,11 @@ Use `.items-baseline` to align items along the flex container's cross axis such
</div>
@endcomponent
### Align Content
---
## Align Content
### Start
Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*:
@ -258,6 +305,8 @@ Use `.content-start` to pack lines in a flex container against the start of the
</div>
@endcomponent
### Center
Use `.content-center` to pack lines in a flex container in the center of the main axis:
@component('_partials.code-sample')
@ -280,6 +329,8 @@ Use `.content-center` to pack lines in a flex container in the center of the mai
</div>
@endcomponent
### End
Use `.content-end` to pack lines in a flex container against the end of the main axis:
@component('_partials.code-sample')
@ -302,6 +353,8 @@ Use `.content-end` to pack lines in a flex container against the end of the main
</div>
@endcomponent
### Space between
Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line:
@component('_partials.code-sample')
@ -324,6 +377,8 @@ Use `.content-between` to distribute lines in a flex container such that there i
</div>
@endcomponent
### Space around
Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line:
@component('_partials.code-sample')
@ -346,7 +401,11 @@ Use `.content-around` to distribute lines in a flex container such that there is
</div>
@endcomponent
## Flex Items
---
## Flex
### 1
Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
@ -391,6 +450,8 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's i
@endslot
@endcomponent
### Auto
Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size:
@component('_partials.code-sample')
@ -434,6 +495,26 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it
@endslot
@endcomponent
### None
Use `.flex-none` to prevent a flex item from growing or shrinking:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
Item that cannot grow or shrink
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@endcomponent
### Initial
Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*:
@component('_partials.code-sample')
@ -484,6 +565,12 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc
@endslot
@endcomponent
---
## Flex Grow
### Grow
Use `.flex-grow` to allow a flex item to grow to fill any available space:
@component('_partials.code-sample')
@ -500,21 +587,7 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space:
</div>
@endcomponent
Use `.flex-shrink` to allow a flex item to shrink if needed:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
Longer content that cannot flex
</div>
<div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
Item that will shrink even if it causes the content to wrap
</div>
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
Longer content that cannot flex
</div>
</div>
@endcomponent
### Don't grow
Use `.flex-no-grow` to prevent a flex item from growing:
@ -532,6 +605,30 @@ Use `.flex-no-grow` to prevent a flex item from growing:
</div>
@endcomponent
---
## Flex shrink
### Shrink
Use `.flex-shrink` to allow a flex item to shrink if needed:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
Longer content that cannot flex
</div>
<div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
Item that will shrink even if it causes the content to wrap
</div>
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
Longer content that cannot flex
</div>
</div>
@endcomponent
### Don't shrink
Use `.flex-no-shrink` to prevent a flex item from shrinking:
@component('_partials.code-sample')
@ -548,23 +645,11 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking:
</div>
@endcomponent
Use `.flex-none` to prevent a flex item from growing or shrinking:
---
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
Item that can shrink if needed
</div>
<div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
Item that cannot grow or shrink
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
Item that can shrink if needed
</div>
</div>
@endcomponent
## Align Self
### Align Self
### Start
Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
@ -576,6 +661,8 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
</div>
@endcomponent
### End
Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
@component('_partials.code-sample')
@ -586,6 +673,8 @@ Use `.self-end` to align an item to the end of the flex container's cross axis,
</div>
@endcomponent
### Center
Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
@component('_partials.code-sample')
@ -596,6 +685,8 @@ Use `.self-center` to align an item along the center of the flex container's cro
</div>
@endcomponent
### Stretch
Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
@component('_partials.code-sample')