h5在创建便签时,noteList.innerHTML+=noteHtml;,之后如何加盒子,实现flex-wrap: wrap;效果
时间: 2024-02-25 07:56:32 浏览: 20
要实现 `flex-wrap: wrap;` 效果,需要将 `noteList` 的 `display` 属性设置为 `flex`,然后再在 `noteList` 的子元素(即便签)上设置 `flex-basis` 和 `flex-grow` 属性。具体实现步骤如下:
1. 在 CSS 样式表中,设置 `noteList` 的样式为 `display: flex;`
```css
.noteList {
display: flex;
flex-wrap: wrap;
}
```
2. 在 JavaScript 中,创建一个新的 `div` 元素作为每个便签的容器,设置它的样式为 `flex-basis: calc(33.33% - 20px); flex-grow: 1;`,表示每个便签的宽度为父元素宽度的1/3减去20像素,并且自动增长以填充剩余空间。
```javascript
// 创建便签容器,并设置样式
const noteContainer = document.createElement('div');
noteContainer.style.flexBasis = 'calc(33.33% - 20px)';
noteContainer.style.flexGrow = 1;
// 将便签内容添加到容器中
noteContainer.innerHTML = noteHtml;
// 将便签容器添加到便签列表中
noteList.appendChild(noteContainer);
```
这样,每个便签就会自动适应父元素的宽度,并且当空间不足时,会自动换行,实现 `flex-wrap: wrap;` 效果。