js实现flex grow
Flex Grow 的实现
在 JavaScript 中实现 flex-grow 的效果，可以通过直接操作 DOM 元素的 style 属性或使用 CSS 类来控制。以下是几种常见方法：
直接设置 style 属性
通过 JavaScript 动态设置元素的 flex-grow 属性：
const element = document.getElementById('flexItem');
element.style.flexGrow = '2'; // 设置 flex-grow 值为 2动态添加 CSS 类
定义一个 CSS 类，并通过 JavaScript 动态添加或移除：
.flex-grow-2 {
flex-grow: 2;
}const element = document.getElementById('flexItem');
element.classList.add('flex-grow-2');批量设置多个子元素的 flex-grow
通过遍历子元素并分配不同的 flex-grow 值：
const container = document.getElementById('flexContainer');
const children = container.children;
Array.from(children).forEach((child, index) => {
child.style.flexGrow = index + 1; // 分配递增的 flex-grow 值
});响应式调整 flex-grow
根据窗口大小或其他条件动态调整 flex-grow：
window.addEventListener('resize', () => {
const element = document.getElementById('flexItem');
if (window.innerWidth > 768) {
element.style.flexGrow = '3';
} else {
element.style.flexGrow = '1';
}
});注意事项
flex-grow是 Flexbox 布局的一部分，需确保父容器设置了display: flex。- 直接操作
style属性会覆盖内联样式，优先考虑使用 CSS 类。 - 使用
classList方法可以更方便地管理多个 CSS 类。
