Spacer
給 VStack 與 HStack 當「將 children 隔開用」的元素。
axiom
box-sizing: border-box (長寬包含邊線)
width: 0 或 height: 0
border: none (不能有邊線)
具有 margin-left: auto 或 margin-top: auto
code example
/* ⭐️ 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)
Last updated