diff --git a/docs/source/docs/flexbox.blade.md b/docs/source/docs/flexbox.blade.md deleted file mode 100644 index 17344a90a..000000000 --- a/docs/source/docs/flexbox.blade.md +++ /dev/null @@ -1,697 +0,0 @@ ---- -extends: _layouts.documentation -title: "Flexbox" -description: null ---- - -
- Usage - Responsive - Customizing -
- -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. - -## Display - -### Flex - -Use `.flex` to create a block-level flex container: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Inline flex - -Use `.inline-flex` to create an inline flex container: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - ---- - -## Flex Direction - -### Row - -Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Row reversed - -Use `.flex-row-reverse` to position flex items horizontally in the opposite direction: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Column - -Use `.flex-col` to position flex items vertically: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Column reversed - -Use `.flex-col-reverse` to position flex items vertically in the opposite direction: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - ---- - -## Flex Wrapping - -### No wrapping - -Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent - -### Wrap normally - -Use `.flex-wrap` to allow flex items to wrap: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent - -### Wrap reversed - -Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-@endcomponent - ---- - -## 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)*: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### End - -Use `.justify-end` to justify items against the end of the flex container's main axis: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Center - -Use `.justify-center` to justify items along the center of the flex container's main axis: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@endcomponent - ---- - -## Align Items - -### Stretch - -Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Start - -Use `.items-start` to align items to the start of the flex container's cross axis: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### End - -Use `.items-end` to align items to the end of the flex container's cross axis: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@endcomponent - -### Center - -Use `.items-center` to align items along the center of the flex container's cross axis: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@endcomponent - ---- - -## 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)*: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent - -### Center - -Use `.content-center` to pack lines in a flex container in the center of the main axis: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent - -### End - -Use `.content-end` to pack lines in a flex container against the end of the main axis: - -@component('_partials.code-sample') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@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') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@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') -
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-@endcomponent - ---- - -## Flex - -### 1 - -Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size: - -@component('_partials.code-sample') -

Default behavior

-
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
-

With .flex-1

-
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
- -@slot('code') -
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
-@endslot -@endcomponent - -### Auto - -Use `.flex-auto` to allow a flex item to grow and shrink, taking into account its initial size: - -@component('_partials.code-sample') -

Default behavior

-
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
-

With .flex-auto

-
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
- -@slot('code') -
-
- Short -
-
- Medium length -
-
- Significantly larger amount of content -
-
-@endslot -@endcomponent - -### None - -Use `.flex-none` to prevent a flex item from growing or shrinking: - -@component('_partials.code-sample') -
-
- Item that can grow or shrink if needed -
-
- Item that cannot grow or shrink -
-
- Item that can grow or shrink if needed -
-
-@endcomponent - -### Initial - -Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size *(this is also the default behavior)*: - -@component('_partials.code-sample') -

Items don't grow when there's extra space

-
-
- Short -
-
- Medium length -
-
- -

Items shrink if possible when needed

-
-
- Short -
-
- Medium length -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -
-
- -@slot('code') -
-
- Short -
-
- Medium length -
-
- -
-
- Short -
-
- Medium length -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem -
-
-@endslot -@endcomponent - ---- - -## Flex Grow - -### Grow - -Use `.flex-grow` to allow a flex item to grow to fill any available space: - -@component('_partials.code-sample') -
-
- Content that cannot flex -
-
- Item that will grow -
-
- Content that cannot flex -
-
-@endcomponent - -### Don't grow - -Use `.flex-no-grow` to prevent a flex item from growing: - -@component('_partials.code-sample') -
-
- Will grow -
-
- Will not grow -
-
- Will grow -
-
-@endcomponent - ---- - -## Flex shrink - -### Shrink - -Use `.flex-shrink` to allow a flex item to shrink if needed: - -@component('_partials.code-sample') -
-
- Longer content that cannot flex -
-
- Item that will shrink even if it causes the content to wrap -
-
- Longer content that cannot flex -
-
-@endcomponent - -### Don't shrink - -Use `.flex-no-shrink` to prevent a flex item from shrinking: - -@component('_partials.code-sample') -
-
- Item that can shrink if needed -
-
- Item that cannot shrink below its initial size -
-
- Item that can shrink if needed -
-
-@endcomponent - ---- - -## 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: - -@component('_partials.code-sample') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@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') -
-
1
-
2
-
3
-
-@endcomponent