uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
183 lines (142 loc) • 6.27 kB
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>
.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>