mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #202 from nothingworksinc/flex-docs
First pass at flex docs
This commit is contained in:
Adam Wathan
GitHub
commit
3d8647b33c
@ -2,8 +2,10 @@
|
||||
.subnav, .subnav& {
|
||||
@apply .flex;
|
||||
@apply .mt-6;
|
||||
@apply .mb-6;
|
||||
@apply .pb-2;
|
||||
@apply .border-b;
|
||||
@apply .border-b-2;
|
||||
@apply .border-smoke;
|
||||
|
||||
.subnav-link, .subnav-link& {
|
||||
@apply .mr-6;
|
||||
@ -31,14 +33,15 @@
|
||||
@apply .p-1;
|
||||
@apply .leading-none;
|
||||
@apply .whitespace-no-wrap;
|
||||
@apply .text-pink;
|
||||
@apply .text-purple;
|
||||
@apply .font-mono;
|
||||
vertical-align: middle;
|
||||
@apply .align-baseline;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> pre, pre& {
|
||||
@apply .font-mono;
|
||||
@apply .font-normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
> blockquote, blockquote& {
|
||||
@ -66,11 +69,11 @@
|
||||
|
||||
> h3, h3& {
|
||||
@apply .mt-12;
|
||||
@apply .mb-8;
|
||||
@apply .mb-4;
|
||||
@apply .text-slate-darker;
|
||||
@apply .leading-none;
|
||||
@apply .font-semibold;
|
||||
@apply .text-lg;
|
||||
@apply .text-base;
|
||||
}
|
||||
|
||||
> p, p&, > blockquote > p {
|
||||
|
||||
@ -26,6 +26,8 @@ pre[class*="language-"] {
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
@ -114,7 +116,7 @@ pre[class*="language-"] {
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
@apply .text-purple-dark;
|
||||
@apply .text-purple;
|
||||
// color: #07a;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="bg-brand-soft antialiased">
|
||||
<html lang="en" class="bg-white">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
@ -13,11 +13,11 @@
|
||||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
</head>
|
||||
<body class="font-sans font-normal text-slate-darker leading-normal">
|
||||
<div class="h-screen flex">
|
||||
<div class="bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
|
||||
<div class="min-h-screen">
|
||||
<div class="fixed pin-y pin-l bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
|
||||
<div class="flex items-center mb-8">
|
||||
<svg class="h-8 w-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
|
||||
<span class='text-xl font-bold'>Tailwind CSS</span>
|
||||
<span class='text-xl font-semibold'>Tailwind CSS</span>
|
||||
{{-- <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS"> --}}
|
||||
{{-- <title>Tailwind CSS</title> --}}
|
||||
{{-- <path d="M8.638 18h-3.01V3.645H.563V1.09H13.69v2.555H8.637V18zm8.456-2.004c1.652 0 2.976-1.1 2.976-2.6v-.95l-2.87.175c-1.407.095-2.216.728-2.216 1.712 0 1.02.844 1.664 2.11 1.664zm-.88 2.203c-2.4 0-4.148-1.512-4.148-3.75 0-2.204 1.7-3.528 4.723-3.716l3.28-.187v-.89c0-1.302-.88-2.052-2.32-2.052-1.383 0-2.262.668-2.45 1.7h-2.706c.13-2.32 2.11-3.985 5.273-3.985 3.082 0 5.086 1.63 5.086 4.125V18H20.14v-1.98h-.058c-.715 1.347-2.273 2.18-3.867 2.18zm9.153-.2h2.918V5.578h-2.918V18zM26.82 3.95c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM30.816 18h2.918V1.09h-2.918V18zM53.07 5.578h-2.883l-2.097 9.54h-.07l-2.426-9.54h-2.8l-2.427 9.54h-.058l-2.1-9.54h-2.93L38.646 18h3.046l2.44-9.082h.057L46.638 18h3.07L53.07 5.578zM54.594 18h2.918V5.578h-2.918V18zm1.453-14.05c.914 0 1.63-.704 1.63-1.583 0-.89-.716-1.594-1.63-1.594-.902 0-1.617.704-1.617 1.594 0 .88.715 1.582 1.617 1.582zM59.96 18h2.92v-7.195c0-1.782 1.065-2.99 2.74-2.99 1.665 0 2.485.986 2.485 2.744V18h2.918V9.973c0-2.87-1.558-4.63-4.3-4.63-1.91 0-3.235.89-3.903 2.368h-.058V5.58h-2.8V18zm18.036.2c-3.13 0-5.156-2.473-5.156-6.423 0-3.925 2.027-6.41 5.156-6.41 1.78 0 3.188.926 3.844 2.297h.07V1.09h2.918V18h-2.86v-2.12h-.046c-.68 1.393-2.11 2.32-3.926 2.32zm.88-10.43c-1.876 0-3.048 1.558-3.048 4.02 0 2.472 1.16 4.02 3.047 4.02 1.84 0 3.047-1.56 3.047-4.02 0-2.438-1.207-4.02-3.047-4.02zm20.788 10.51c3.996 0 6.762-2.19 7.29-5.81h-2.966c-.468 2.038-2.074 3.245-4.312 3.245-2.93 0-4.78-2.38-4.78-6.176 0-3.774 1.862-6.165 4.768-6.165 2.19 0 3.914 1.395 4.313 3.516h2.976c-.375-3.632-3.363-6.08-7.29-6.08-4.804 0-7.862 3.338-7.862 8.73 0 5.425 3.036 8.74 7.864 8.74zm8.283-5.038c.13 3.117 2.683 5.04 6.574 5.04 4.09 0 6.67-2.016 6.67-5.227 0-2.52-1.454-3.938-4.888-4.723l-1.945-.445c-2.074-.492-2.93-1.15-2.93-2.274 0-1.406 1.29-2.343 3.2-2.343 1.933 0 3.257.95 3.398 2.53h2.883c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.477 3.914 4.594 4.63l2.192.514c2.133.504 3 1.207 3 2.426 0 1.406-1.418 2.414-3.457 2.414-2.062 0-3.62-1.02-3.808-2.578h-2.93zm14.424 0c.13 3.117 2.685 5.04 6.575 5.04 4.09 0 6.668-2.016 6.668-5.227 0-2.52-1.453-3.938-4.886-4.723l-1.946-.445c-2.073-.492-2.928-1.15-2.928-2.274 0-1.406 1.29-2.343 3.2-2.343 1.932 0 3.257.95 3.397 2.53h2.882c-.07-2.976-2.53-4.99-6.258-4.99-3.68 0-6.293 2.026-6.293 5.026 0 2.414 1.478 3.914 4.595 4.63l2.19.514c2.134.504 3 1.207 3 2.426 0 1.406-1.417 2.414-3.456 2.414-2.063 0-3.622-1.02-3.81-2.578h-2.93z" fill="#3A3F46" fill-rule="evenodd"></path> --}}
|
||||
@ -35,35 +35,35 @@
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Introduction</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/what-is-tailwind') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/what-is-tailwind">What is Tailwind?</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Getting Started</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="text-slate" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/installation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/configuration') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/configuration">
|
||||
<a class="{{ $page->active('/workflow/configuration') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/configuration">
|
||||
Configuration
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/color-palette') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
|
||||
<a class="{{ $page->active('/workflow/color-palette') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
|
||||
Color Palette
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/responsive-design') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
|
||||
<a class="{{ $page->active('/workflow/responsive-design') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
|
||||
Responsive Design
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/adding-new-utilities') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
|
||||
<a class="{{ $page->active('/workflow/adding-new-utilities') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/adding-new-utilities">
|
||||
Adding New Utilities
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a class="{{ $page->active('/extracting-components') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
|
||||
<a class="{{ $page->active('/workflow/extracting-components') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/workflow/extracting-components">
|
||||
Extracting Components
|
||||
</a>
|
||||
</li>
|
||||
@ -72,93 +72,105 @@
|
||||
<div class="mt-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
|
||||
<ul class="mb-8">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Alignment</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/base" class="{{ $page->active('/styles/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/alignment" class="{{ $page->active('/styles/alignment') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Alignment</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/backgrounds/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/backgrounds/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Position</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Size</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="block mb-2 {{ $page->active('/styles/backgrounds/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/backgrounds/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/color" class="{{ $page->active('/backgrounds/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/position" class="{{ $page->active('/backgrounds/position') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Position</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/backgrounds/size" class="{{ $page->active('/backgrounds/size') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Size</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/borders/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active('/borders/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Base</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Radius</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/borders/base" class="block mb-2 {{ $page->active('/styles/borders/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Borders</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/borders/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/base" class="{{ $page->active('/borders/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/color" class="{{ $page->active('/borders/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/style" class="{{ $page->active('/borders/style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/borders/radius" class="{{ $page->active('/borders/radius') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Radius</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/buttons') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Buttons</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Container</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox" class="{{ $page->active('/flexbox') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Flexbox</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/floats') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Floats</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/forms') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Forms</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/grid') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Grid</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/buttons" class="{{ $page->active('/styles/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Buttons</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/styles/container') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/styles/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/interactivity/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active('/interactivity/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/cursor') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Cursor</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/resize') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Resize</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/pointer-events') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Pointer Events</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/user-select') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">User Select</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/flexbox/display" class="block mb-2 {{ $page->active('/styles/flexbox/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/flexbox/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/display" class="{{ $page->active('/styles/flexbox/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/direction" class="{{ $page->active('/styles/flexbox/direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/wrapping" class="{{ $page->active('/styles/flexbox/wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/justify-content" class="{{ $page->active('/styles/flexbox/justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-items" class="{{ $page->active('/styles/flexbox/align-items') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Items</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-content" class="{{ $page->active('/styles/flexbox/align-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Content</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/align-self" class="{{ $page->active('/styles/flexbox/align-self') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Align Self</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/flex-grow-shrink" class="{{ $page->active('/styles/flexbox/flex-grow-shrink') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flex, Grow, & Shrink</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/lists') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Lists</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/opacity') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Opacity</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/overflow') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Overflow</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/positioning') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Positioning</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/shadows') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Shadows</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/floats" class="{{ $page->active('/styles/floats') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Floats</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/forms" class="{{ $page->active('/styles/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Forms</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/grid" class="{{ $page->active('/styles/grid') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Grid</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/sizing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active('/sizing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Min-Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Max-Height</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="block mb-2 {{ $page->active('/styles/interactivity/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Interactivity</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/interactivity/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/cursor" class="{{ $page->active('/interactivity/cursor') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Cursor</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/resize" class="{{ $page->active('/interactivity/resize') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Resize</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/pointer-events" class="{{ $page->active('/interactivity/pointer-events') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Pointer Events</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/interactivity/user-select" class="{{ $page->active('/interactivity/user-select') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">User Select</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/lists" class="{{ $page->active('/styles/lists') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Lists</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/opacity" class="{{ $page->active('/styles/opacity') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Opacity</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/overflow" class="{{ $page->active('/styles/overflow') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Overflow</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/positioning" class="{{ $page->active('/styles/positioning') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Positioning</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/shadows" class="{{ $page->active('/styles/shadows') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Shadows</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/sizing/width" class="block mb-2 {{ $page->active('/styles/sizing/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/sizing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/width" class="{{ $page->active('/sizing/width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-width" class="{{ $page->active('/sizing/min-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-width" class="{{ $page->active('/sizing/max-width') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Width</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/height" class="{{ $page->active('/sizing/height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/min-height" class="{{ $page->active('/sizing/min-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Min-Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/sizing/max-height" class="{{ $page->active('/sizing/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/spacing/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active('/spacing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Padding</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Margin</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Negative Margin</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/spacing/padding" class="block mb-2 {{ $page->active('/styles/spacing/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/spacing/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/padding" class="{{ $page->active('/spacing/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/margin" class="{{ $page->active('/spacing/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/spacing/negative-margin" class="{{ $page->active('/spacing/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/svg') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">SVG</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/svg" class="{{ $page->active('/styles/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/text/') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Typography</a>
|
||||
<ul class="pl-4 {{ $page->active('/text/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Fonts</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Sizing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Weight</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Line Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Letter Spacing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Wrapping</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Style & Decoration</a></li>
|
||||
<a href="{{ $page->baseUrl }}/styles/text/fonts" class="block mb-2 {{ $page->active('/styles/text/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
|
||||
<ul class="pl-4 {{ $page->active('/styles/text/') ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/fonts" class="{{ $page->active('/text/fonts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Fonts</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/color" class="{{ $page->active('/text/color') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Color</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/sizing" class="{{ $page->active('/text/sizing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Sizing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/weight" class="{{ $page->active('/text/weight') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Weight</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/line-height" class="{{ $page->active('/text/line-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Line Height</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/letter-spacing" class="{{ $page->active('/text/letter-spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Letter Spacing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/wrapping" class="{{ $page->active('/text/wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/text/style" class="{{ $page->active('/text/style') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Style & Decoration</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/visibility') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Visibility</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/z-index') ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}">Z-Index</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/visibility" class="{{ $page->active('/styles/visibility') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Visibility</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/styles/z-index" class="{{ $page->active('/styles/z-index') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Z-Index</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Examples</p>
|
||||
<ul>
|
||||
<li class="mb-3"><a class="{{ $page->getUrl() === '/examples/alerts' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->getUrl() === '/examples/cards' ? 'text-slate-darker font-semibold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/alerts">Alerts</a></li>
|
||||
<li class="mb-3"><a class="{{ $page->active('/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/examples/cards">Cards</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="bg-smoke-light flex-grow overflow-scroll-y">
|
||||
<div class="ml-80">
|
||||
<div class="px-6 py-8 w-full max-w-xl mx-auto">
|
||||
@yield('body')
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="rounded mask shadow mb-4">
|
||||
<div class="bg-white border-b-2 border-smoke p-6 {{ $class ?? '' }}">
|
||||
<div class="rounded mask border-2 border-smoke mb-8">
|
||||
<div class="bg-white border-b-2 border-smoke p-4 {{ $class ?? '' }}">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
<div>
|
||||
<pre class="markdown language-{{ $lang }}" style="margin: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
|
||||
<div class="p-4 bg-smoke-lighter">
|
||||
<pre class="markdown language-{{ $lang ?? 'html' }}" style="margin: 0; padding: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
698
docs/source/styles/flexbox.blade.md
Normal file
698
docs/source/styles/flexbox.blade.md
Normal file
@ -0,0 +1,698 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
<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.
|
||||
|
||||
## Display
|
||||
|
||||
### Flex
|
||||
|
||||
Use `.flex` to create a block-level flex container:
|
||||
|
||||
@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">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>
|
||||
@endcomponent
|
||||
|
||||
### Inline flex
|
||||
|
||||
Use `.inline-flex` to create an inline flex container:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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>
|
||||
@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')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Row reversed
|
||||
|
||||
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column
|
||||
|
||||
Use `.flex-col` to position flex items vertically:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Column reversed
|
||||
|
||||
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
## Flex Wrapping
|
||||
|
||||
### No wrapping
|
||||
|
||||
Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-nowrap bg-smoke-light">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Wrap normally
|
||||
|
||||
Use `.flex-wrap` to allow flex items to wrap:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap bg-smoke-light">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Wrap reversed
|
||||
|
||||
Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap-reverse bg-smoke-light">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@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')
|
||||
<div class="flex justify-start bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.justify-end` to justify items against the end of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-end bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.justify-center` to justify items along the center of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-center bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</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')
|
||||
<div class="flex justify-between bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</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')
|
||||
<div class="flex justify-around bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@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')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
### Start
|
||||
|
||||
Use `.items-start` to align items to the start of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.items-end` to align items to the end of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.items-center` to align items along the center of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@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')
|
||||
<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>
|
||||
@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')
|
||||
<div class="flex content-start flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Center
|
||||
|
||||
Use `.content-center` to pack lines in a flex container in the center of the main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-center flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### End
|
||||
|
||||
Use `.content-end` to pack lines in a flex container against the end of the main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-end flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</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')
|
||||
<div class="flex content-between flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</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')
|
||||
<div class="flex content-around flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
## Flex
|
||||
|
||||
### 1
|
||||
|
||||
Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-slate-light mb-1">Default behavior</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-light mb-1">With <code>.flex-1</code></p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@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')
|
||||
<p class="text-sm text-slate-light mb-1">Default behavior</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-light mb-1">With <code>.flex-auto</code></p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@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')
|
||||
<p class="text-sm text-slate-light mb-1">Items don't grow when there's extra space</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-slate-light mb-1">Items shrink if possible when needed</p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
## Flex Grow
|
||||
|
||||
### Grow
|
||||
|
||||
Use `.flex-grow` to allow a flex item to grow to fill any available space:
|
||||
|
||||
@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">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
<div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Item that will grow
|
||||
</div>
|
||||
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Don't grow
|
||||
|
||||
Use `.flex-no-grow` to prevent a flex item from growing:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
<div class="flex-no-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Will not grow
|
||||
</div>
|
||||
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
</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')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
<div class="flex-no-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Item that cannot shrink below it's initial size
|
||||
</div>
|
||||
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@endcomponent
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
<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>
|
||||
136
docs/source/styles/flexbox/align-content.blade.md
Normal file
136
docs/source/styles/flexbox/align-content.blade.md
Normal file
@ -0,0 +1,136 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Align Content
|
||||
|
||||
<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>Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.content-start` to pack lines in a flex container against the start of the main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-start flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Center
|
||||
|
||||
Use `.content-center` to pack lines in a flex container in the center of the main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-center flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## End
|
||||
|
||||
Use `.content-end` to pack lines in a flex container against the end of the main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex content-end flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</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')
|
||||
<div class="flex content-between flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</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')
|
||||
<div class="flex content-around flex-wrap bg-smoke-light h-48">
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">4</div>
|
||||
</div>
|
||||
<div class="w-1/3 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">5</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
77
docs/source/styles/flexbox/align-items.blade.md
Normal file
77
docs/source/styles/flexbox/align-items.blade.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Align Items
|
||||
|
||||
<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>
|
||||
|
||||
Use `.items-stretch` to stretch items to fill the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
## Start
|
||||
|
||||
Use `.items-start` to align items to the start of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
## Center
|
||||
|
||||
Use `.items-center` to align items along the center of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@endcomponent
|
||||
|
||||
## End
|
||||
|
||||
Use `.items-end` to align items to the end of the flex container's cross axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">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>
|
||||
@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')
|
||||
<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>
|
||||
@endcomponent
|
||||
76
docs/source/styles/flexbox/align-self.blade.md
Normal file
76
docs/source/styles/flexbox/align-self.blade.md
Normal file
@ -0,0 +1,76 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Align Self
|
||||
|
||||
<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>Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.self-auto` to align an item based on the flex container's `align-items` value:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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">1</div>
|
||||
<div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@endcomponent
|
||||
|
||||
## 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')
|
||||
<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">1</div>
|
||||
<div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@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')
|
||||
<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">1</div>
|
||||
<div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark 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>
|
||||
@endcomponent
|
||||
64
docs/source/styles/flexbox/direction.blade.md
Normal file
64
docs/source/styles/flexbox/direction.blade.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Flex Direction
|
||||
|
||||
<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>Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.flex-row` to position flex items horizontally in the same direction as text:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Row reversed
|
||||
|
||||
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-row-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Column
|
||||
|
||||
Use `.flex-col` to position flex items vertically:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Column reversed
|
||||
|
||||
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-col-reverse bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
40
docs/source/styles/flexbox/display.blade.md
Normal file
40
docs/source/styles/flexbox/display.blade.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Display – Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# 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>
|
||||
|
||||
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
|
||||
|
||||
Use `.flex` to create a block-level flex container:
|
||||
|
||||
@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">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>
|
||||
@endcomponent
|
||||
|
||||
## Inline flex
|
||||
|
||||
Use `.inline-flex` to create an inline flex container:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<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>
|
||||
@endcomponent
|
||||
248
docs/source/styles/flexbox/flex-grow-shrink.blade.md
Normal file
248
docs/source/styles/flexbox/flex-grow-shrink.blade.md
Normal file
@ -0,0 +1,248 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Flex, Grow, & Shrink
|
||||
|
||||
<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>Initial <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-slate-light mb-1">Items don't grow when there's extra space</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-slate-light mb-1">Items shrink if possible when needed</p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
|
||||
</div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
## Flex 1
|
||||
|
||||
Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<p class="text-sm text-slate-light mb-1">Default behavior</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-light mb-1">With <code>.flex-1</code></p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@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')
|
||||
<p class="text-sm text-slate-light mb-1">Default behavior</p>
|
||||
<div class="flex bg-smoke-light mb-6">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-light mb-1">With <code>.flex-auto</code></p>
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@slot('code')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Short
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Medium length
|
||||
</div>
|
||||
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Significantly larger amount of content
|
||||
</div>
|
||||
</div>
|
||||
@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
|
||||
|
||||
## Grow
|
||||
|
||||
Use `.flex-grow` to allow a flex item to grow to fill any available space:
|
||||
|
||||
@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">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
<div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Item that will grow
|
||||
</div>
|
||||
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Content that cannot flex
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Don't grow
|
||||
|
||||
Use `.flex-no-grow` to prevent a flex item from growing:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
<div class="flex-no-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Will not grow
|
||||
</div>
|
||||
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Will grow
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## 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')
|
||||
<div class="flex bg-smoke-light">
|
||||
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
<div class="flex-no-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
|
||||
Item that cannot shrink below it's initial size
|
||||
</div>
|
||||
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
|
||||
Item that can shrink if needed
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
77
docs/source/styles/flexbox/justify-content.blade.md
Normal file
77
docs/source/styles/flexbox/justify-content.blade.md
Normal file
@ -0,0 +1,77 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Justify Content
|
||||
|
||||
<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>Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.justify-start` to justify items against the start of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-start bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Center
|
||||
|
||||
Use `.justify-center` to justify items along the center of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-center bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## End
|
||||
|
||||
Use `.justify-end` to justify items against the end of the flex container's main axis:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex justify-end bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</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')
|
||||
<div class="flex justify-between bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</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')
|
||||
<div class="flex justify-around bg-smoke-light">
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
|
||||
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
70
docs/source/styles/flexbox/wrapping.blade.md
Normal file
70
docs/source/styles/flexbox/wrapping.blade.md
Normal file
@ -0,0 +1,70 @@
|
||||
---
|
||||
extends: _layouts.markdown
|
||||
title: "Flexbox"
|
||||
---
|
||||
|
||||
<div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
|
||||
|
||||
# Flex Wrapping
|
||||
|
||||
<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>Don't wrap <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
|
||||
|
||||
Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-no-wrap bg-smoke-light">
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 flex-none p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Wrap normally
|
||||
|
||||
Use `.flex-wrap` to allow flex items to wrap:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap bg-smoke-light">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Wrap reversed
|
||||
|
||||
Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div class="flex flex-wrap-reverse bg-smoke-light">
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">1</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">2</div>
|
||||
</div>
|
||||
<div class="w-2/5 p-2">
|
||||
<div class="text-slate text-center bg-smoke p-2">3</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -80,7 +80,7 @@ module.exports = {
|
||||
},
|
||||
text: {
|
||||
fonts: {
|
||||
'sans': 'museo-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
'sans': 'Proxima Nova, proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
|
||||
'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
@ -96,7 +96,7 @@ module.exports = {
|
||||
'4xl': '2.875rem', // 46px
|
||||
},
|
||||
weights: {
|
||||
'normal': 300,
|
||||
'normal': 400,
|
||||
'semibold': 500,
|
||||
'bold': 700,
|
||||
},
|
||||
@ -109,7 +109,7 @@ module.exports = {
|
||||
tracking: {
|
||||
'tight': '-0.05em',
|
||||
'normal': '0',
|
||||
'wide': '0.1em',
|
||||
'wide': '0.05em',
|
||||
},
|
||||
colors: {
|
||||
...colors
|
||||
@ -241,7 +241,8 @@ module.exports = {
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem'
|
||||
'16': '4rem',
|
||||
'80': '20rem',
|
||||
},
|
||||
negativeMargin: {
|
||||
'px': '1px',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user