153 lines
6.6 KiB
HTML
153 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Flex</title>
|
|
</head>
|
|
<body>
|
|
<!-- Flex and alignment -->
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
|
|
<div class="flex items-start h-72 w-full bg-orange-100">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
<div class="flex items-center h-72 w-full bg-orange-200">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
<div class="flex items-end h-72 w-full bg-orange-300">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-center h-72 w-full bg-fuchsia-200">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
<div class="flex items-center justify-around h-72 w-full bg-fuchsia-300">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
<div class="flex items-center justify-between h-72 w-full bg-fuchsia-400">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-wrap h-72 w-full bg-zinc-300-400">
|
|
<div class="p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-500 bg-blue-100">05</div>
|
|
</div>
|
|
|
|
|
|
<!-- Flex Column, Gap and Order -->
|
|
<div class="flex flex-col gap-4 h-72 w-full items-center">
|
|
<div class="order-3 p-10 border border-blue-500 bg-blue-100">01</div>
|
|
<div class="order-2 p-10 border border-blue-500 bg-blue-100">02</div>
|
|
<div class="order-4 p-10 border border-blue-500 bg-blue-100">03</div>
|
|
<div class="order-1 p-10 border border-blue-500 bg-blue-100">04</div>
|
|
</div>
|
|
|
|
|
|
<!-- Grow and shrink -->
|
|
<div class="flex w-full bg-orange-100">
|
|
<div class="flex-initial w-64 p-10 border border-blue-300 bg-blue-100">01</div>
|
|
<div class="flex-none w-64 p-10 border border-blue-300 bg-blue-100">02</div>
|
|
<div class="flex-auto w-64 p-10 border border-blue-300 bg-blue-100">03</div>
|
|
<div class="flex-1 p-10 border border-blue-300 bg-blue-100">04</div>
|
|
<div class="p-10 border border-blue-300 bg-blue-100">05</div>
|
|
<div class="p-10 border border-blue-300 bg-blue-100">06</div>
|
|
<div class="p-10 border border-blue-300 bg-blue-100">07</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex text-center">
|
|
<div class="flex-1 bg-blue-100">Hello</div>
|
|
<div class="flex-1 bg-blue-100">Hello</div>
|
|
<div class="flex-1 bg-blue-100">Hello</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- Justify Content
|
|
justify-start justify-content: flex-start;
|
|
justify-end justify-content: flex-end;
|
|
justify-center justify-content: center;
|
|
justify-between justify-content: space-between;
|
|
justify-around justify-content: space-around;
|
|
justify-evenly justify-content: space-evenly;
|
|
-->
|
|
|
|
<!--
|
|
items-start align-items: flex-start;
|
|
items-end align-items: flex-end;
|
|
items-center align-items: center;
|
|
items-baseline align-items: baseline;
|
|
items-stretch align-items: stretch;
|
|
-->
|
|
|
|
<!-- Flex Direction
|
|
flex-row flex-direction: row;
|
|
flex-row-reverse flex-direction: row-reverse;
|
|
flex-col flex-direction: column;
|
|
flex-col-reverse flex-direction: column-reverse;
|
|
-->
|
|
|
|
<!--
|
|
flex-wrap flex-wrap: wrap;
|
|
flex-wrap-reverse flex-wrap: wrap-reverse;
|
|
flex-nowrap flex-wrap: nowrap;
|
|
-->
|
|
|
|
<!-- Flex Properties
|
|
flex-none flex: none;
|
|
Prevent item from growing or shrinking
|
|
|
|
flex-initial flex: 0 1 auto;
|
|
Allow item to shrink but not grow, taking into account its initial size
|
|
|
|
flex-auto flex: 1 1 auto;
|
|
Allow item to grow and shrink, taking into account its initial size
|
|
|
|
flex-1 flex: 1 1 0%;
|
|
Allow item to grow and shrink as needed, ignoring its initial size
|
|
-->
|