import { $, /* $all, */ log } from './layout/helpers.mjs';
const flexbox = $('.flex');
// append more flex items
const n = 7;
for (let i = 0; i < n; i++) {
let div = document.createElement('div');
flexbox.appendChild(div);
}
//
const flex = $('.flex');
// controls
const form = $('form');
// flex-direction
// --------------
// $('#reverse'): HTMLInputElement
// ⭐️ form.dir: RadioNodeList
// ⭐️ $all('.dir > input[type="radio"]'): NodeList
// dirction on change
$('.dir').onchange = (e) => {
// ⭐️ 注意:e.target 可能是 checkbox❗️
let dir = form.dir.value;
let postfix = form.reverse.checked ? '-reverse' : '';
flex.style.flexDirection = `${dir}${postfix}`;
};
// flex-wrap
// ----------
// ⭐️ form.wrap: RadioNodeList
// wrap on change
$('.wrap').onchange = (e) => {
flex.style.flexWrap = e.target.value;
};