Spacer
Last updated
Last updated
๐ฐ CSS โฉ Layout โฉ System โฉ
็ตฆ VStack ่ HStack ็ถใๅฐ children ้้็จใ็ๅ ็ด ใ
box-sizing: border-box (้ทๅฏฌๅ ๅซ้็ท)
width: 0 ๆ height: 0
border: none (ไธ่ฝๆ้็ท)
ๅ ทๆ margin-left: auto ๆ margin-top: auto
/* โญ๏ธ spacer */
.hstack > .spacer {
margin-left: auto;
width: 0;
border: none;
}
.vstack > .spacer {
margin-top: auto;
height: 0;
border: none;
}<div class="hstack">
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
</div>
<div class="vstack">
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
</div>replit โฉ layout + spacer (v.2.0.1)
// Spacer
export default class Spacer extends HTMLElement {
}
// โญ๏ธ register new tag <i-Spacer>
customElements.get('i-spacer') || customElements.define('i-spacer', Spacer);/* โญ๏ธ Spacer in HStack */
i-hstack > i-spacer {
margin-left: auto !important;
width: 0 !important;
border: none !important;
}
/* โญ๏ธ Spacer in VStack */
i-vstack > i-spacer {
margin-top: auto !important;
height: 0 !important;
border: none !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>layout + spacer</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>VStack</h1>
<fieldset>
<legend> alignment: </legend>
<select name="alignment" id="alignment">
<option value="center">center (default)</option>
<option value="stretch">stretch</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
</select>
</fieldset>
<i-vstack class="container">
<i-vstack alignment="flex-start" spacing="0">
<h2>VStack</h2>
<i-spacer></i-spacer>
<p>spacing: 0</p>
<p>spacing: 0</p>
<i-spacer></i-spacer>
<p>alignment: flex-start</p>
<p>alignment: flex-start</p>
</i-vstack>
</i-vstack>
<!-- โญ๏ธ load layout system -->
<script type="module" src="layout/index.mjs"></script>
<script src="script.js"></script>
</body>
</html>replit โฉ layout + spacer (v.2.0.1)