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

Remove unnecessary flex none

Browse Source
This commit is contained in:
Adam Wathan 2017-08-23 20:05:01 -04:00
parent 61238ef582
commit 50003d8d0c
1 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/source/grid.md
View File

@ -31,7 +31,7 @@ Basic grid example:
Columns don't need to fill a row:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
@ -55,7 +55,7 @@ Columns don't need to fill a row:
Columns can be different widths:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/4">
<div class="text-center py-4 bg-dark-softer text-light">
@ -112,27 +112,24 @@ Rows can overflow and wrap:
Columns can have gutters:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex.pull-x-4</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap.pull-x-4</div>
<div class="flex flex-wrap pull-x-4">
<div class="flex-none w-full md:w-1/3 px-4">
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.flex-none</div>
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
</div>
</div>
<div class="flex-none w-full md:w-1/3 px-4">
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-soft text-light">
<div>.flex-none</div>
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
</div>
</div>
<div class="flex-none w-full md:w-1/3 px-4">
<div class="w-full md:w-1/3 px-4">
<div class="text-center py-4 bg-dark-softer text-light">
<div>.flex-none</div>
<div>.w-full</div>
<div>.md:w-1/3</div>
<div>.px-4</div>
@ -145,7 +142,7 @@ Columns can have gutters:
Column widths can be automatic:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-1/4 md:flex-fill">
<div class="text-center py-4 bg-dark-softer text-light">
@ -178,7 +175,7 @@ Column widths can be automatic:
Fixed width columns are still respected even if a smaller screen has auto column widths:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="flex-fill md:w-1/6 md:flex-none">
<div class="text-center py-4 bg-dark-softer text-light">
@ -222,7 +219,7 @@ Fixed width columns are still respected even if a smaller screen has auto column
Use margin auto utilities to accomplish offsets:
<div class="bg-light-softer text-medium text-sm mb-6">
<div class="text-dark-soft p-4 leading-none">.flex</div>
<div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 md:ml-auto">
<div class="text-center py-4 bg-dark-soft text-light">