Skip to content

Instantly share code, notes, and snippets.

@fredriccliver

fredriccliver/index.html

Created May 8, 2020 16:12
Show Gist options
  • Save fredriccliver/b4bf1a3dc412f1137b47e1b48d913e8b to your computer and use it in GitHub Desktop.
Save fredriccliver/b4bf1a3dc412f1137b47e1b48d913e8b to your computer and use it in GitHub Desktop.
Download ZIP
flex css
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body class="bg-gray-200 p-0 text-gray-800">
<div class="w-1/2 hover:bg-gray w-">
<div class="p-3">
Flex Direction
<div class="bg-gray-400 m-3 p-3">
flex-row
<div class="flex flex-row bg-gray-600 m-3">
<div class="m-3 p-3 bg-blue-300">item</div>
<div class="m-3 p-3 bg-blue-300">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
flex-col
<div class="flex flex-col bg-gray-600 m-3">
<div class="m-3 p-3 bg-blue-300">item</div>
<div class="m-3 p-3 bg-blue-300">item</div>
</div>
</div>
</div>
<div class="p-3">
Justify Content
<div class="bg-gray-400 m-3 p-3">
justify-end
<div class="flex flex-row bg-gray-600 m-3 justify-end">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
justify-center
<div class="flex flex-row bg-gray-600 m-3 justify-center">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
justify-start
<div class="flex flex-row bg-gray-600 m-3 justify-start">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
justify-between
<div class="flex flex-row bg-gray-600 m-3 justify-between">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
justify-around
<div class="flex flex-row bg-gray-600 m-3 justify-around">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
justify-evenly
<div class="flex flex-row bg-gray-600 m-3 justify-evenly">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20">item</div>
</div>
</div>
</div>
<div class="p-3">
Flex Grow
<div class="bg-gray-400 m-3 p-3">
Grow
<div class="flex flex-row bg-gray-600 m-3">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20 flex-grow">growing</div>
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
Grow 0 | none
<div class="flex flex-row bg-gray-600 m-3">
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
<div class="m-3 p-3 bg-blue-300 h-20 flex-grow-0">growing</div>
<div class="m-3 p-3 bg-blue-300 h-10">item</div>
</div>
</div>
</div>
<div class="p-3">
Flex Grow and Shrink
<div class="bg-gray-400 m-3 p-3">
initial: <br />
shrink but not grow
<div class="flex flex-row bg-gray-600 m-3">
<div class="flex-initial m-3 p-3 bg-blue-300">item</div>
<div class="flex-initial m-3 p-3 bg-blue-300">
item with long long text as a multiple lines
</div>
<div class="flex-initial m-3 p-3 bg-blue-300">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
flex-1: <br />
grow and shrink, evenly filled
<div class="flex flex-row bg-gray-600 m-3">
<div class="flex-1 m-3 p-3 bg-blue-300">item</div>
<div class="flex-1 m-3 p-3 bg-blue-300">
item with long long text as a multiple lines
</div>
<div class="flex-1 m-3 p-3 bg-blue-300">item</div>
</div>
</div>
<div class="bg-gray-400 m-3 p-3">
flex-auto: <br />
grow and shrink, spacing relatively with initial size
<div class="flex flex-row bg-gray-600 m-3">
<div class="flex-auto m-3 p-3 bg-blue-300">item</div>
<div class="flex-auto m-3 p-3 bg-blue-300">
item with long long text as a multiple lines
</div>
<div class="flex-auto m-3 p-3 bg-blue-300">item</div>
</div>
</div>
</div>
<div class="p-3">
Alignment
<div class="bg-gray-400 m-3 p-3">
align-self
<div class="flex bg-gray-600 m-3 h-32">
<div class="m-3 p-3 bg-blue-300 self-end">end</div>
<div class="m-3 p-3 bg-blue-300 self-start">start</div>
<div class="m-3 p-3 bg-blue-300 self-stretch">stretch</div>
<div class="m-3 p-3 bg-blue-300 self-center">center</div>
<div class="m-3 p-3 bg-blue-300 self-auto">auto</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment