2022好用的css特性(2)

flex gap

// html
<div class="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>
// css
.container {
  display: flex;
  gap: 20px 10px;
  flex-wrap: wrap;
  width: 170px;
  background-color: yellow;
}

.item {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-color: red;
  text-align: center;
  line-height: 50px;
}

平时想实现这个功能都是用margin实现的，但是需要对末尾，换行节点特殊处理，相对而言还是方便许多

currentcolor

currentcolor被用作颜色属性时，继承父级元素的color属性。

// html
<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

相当于任何颜色都可以继承color了，优雅。