mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
6.1 KiB
182 lines
6.1 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Flex - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
<style type="text/css">
|
|
|
|
.uk-flex > * {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.uk-flex > :nth-child(8n-7) { background: rgba(0,0,0,0.1); }
|
|
.uk-flex > :nth-child(8n-6) { background: rgba(0,0,0,0.15); }
|
|
.uk-flex > :nth-child(8n-5) { background: rgba(0,0,0,0.2); }
|
|
.uk-flex > :nth-child(8n-4) { background: rgba(0,0,0,0.25); }
|
|
.uk-flex > :nth-child(8n-3) { background: rgba(0,0,0,0.3); }
|
|
.uk-flex > :nth-child(8n-2) { background: rgba(0,0,0,0.35); }
|
|
.uk-flex > :nth-child(8n-1) { background: rgba(0,0,0,0.40); }
|
|
.uk-flex > :nth-child(8n) { background: rgba(0,0,0,0.45); }
|
|
|
|
.test {
|
|
height: 300px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Flex</h1>
|
|
|
|
<h2>Alignment and Justify</h2>
|
|
|
|
<h3>Stretch / Left (Default)</h3>
|
|
|
|
<div class="uk-flex uk-child-width-1-4">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Middle / Center</h3>
|
|
|
|
<div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-4">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Bottom / Right</h3>
|
|
|
|
<div class="uk-flex uk-flex-bottom uk-flex-right uk-child-width-1-4">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Top / Space-between</h3>
|
|
|
|
<div class="uk-flex uk-flex-top uk-flex-between uk-child-width-1-4">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Stretch / Space-around</h3>
|
|
|
|
<div class="uk-flex uk-flex-around uk-child-width-1-4">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h2>Wrap and Alignment</h2>
|
|
|
|
<h3>Stretch</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Top</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap uk-flex-wrap-top test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Middle</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap uk-flex-wrap-middle test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Bottom</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap uk-flex-wrap-bottom test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Space-between</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap uk-flex-wrap-between test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h3>Space-around</h3>
|
|
|
|
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around test">
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
<div class="uk-width-1-3">1-3</div>
|
|
<div class="uk-width-1-2">1-2<br>...</div>
|
|
<div class="uk-width-1-3">1-3<br>...<br>...</div>
|
|
</div>
|
|
|
|
<h2>Inline Flex</h2>
|
|
|
|
<div class="uk-text-center">
|
|
<div class="uk-flex uk-flex-inline">
|
|
<div>1-4</div>
|
|
<div>1-4<br>...</div>
|
|
<div>1-4<br>...<br>...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Order</h2>
|
|
|
|
<div class="uk-flex uk-child-width-1-3">
|
|
<div>1</div>
|
|
<div>2</div>
|
|
<div class="uk-flex-first">3</div>
|
|
</div>
|
|
|
|
<div class="uk-flex uk-child-width-1-3">
|
|
<div class="uk-flex-last">1</div>
|
|
<div>2</div>
|
|
<div>3</div>
|
|
</div>
|
|
|
|
<div class="uk-flex uk-child-width-1-3">
|
|
<div class="uk-flex-last">1</div>
|
|
<div>2</div>
|
|
<div class="uk-flex-first">3</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|