62 lines
1.8 KiB
HTML
62 lines
1.8 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 -->
|
|
|
|
<!-- Flex Column, Gap and Order -->
|
|
|
|
<!-- Grow and shrink -->
|
|
</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
|
|
-->
|