CSS flex布局设置gap时的宽度自适应以及cale、var、--变量的使用

/* 定义一个简单的flex容器 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 设置元素之间的间隙 */
}
 
/* 定义容器内部的子元素样式，使它们的宽度自适应 */
.container > div {
  flex: 1;
  min-width: 0; /* 防止子元素由于flex: 1产生的最小宽度影响自适应 */
  background-color: #f0f0f0; /* 设置背景色用于区分元素 */
}
 
/* 使用CSS变量设置容器内部的背景颜色 */
.container {
  --bg-color: #4facfe;
  background-color: var(--bg-color); /* 使用CSS变量设置背景色 */
}
 
/* 使用CSS自定义属性设置容器内部的背景颜色 */
.container {
  background-color: #ff6347; /* 默认背景色 */
}
.container[data-bg-color="blue"] {
  background-color: #0000ff; /* 当data-bg-color属性为blue时，背景色改为蓝色 */
}
 
/* 示例HTML结构 */
<div class="container" data-bg-color="blue">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

这个代码实例展示了如何在一个flex容器中设置元素之间的间隙（gap），并且如何使用CSS变量和自定义属性来控制容器的样式。同时，子元素的宽度会自适应内容大小，避免因flex布局的flex: 1属性导致的宽度溢出问题。