css - Flexbox 弯 Angular

Question

是否可以让 flexbox 的内容适应它的边界半径。

例如:

如果我们有一个带有 border-radius: 10px 的 flexbox，当我们重新排列盒子内的元素时，是否有可能使生成的 Angular 元素具有相同的相应 border-radius。

例如: 右上角元素将具有 border-top-right-radius: 10px

Answer 1

您只需要将 overflow:hidden; 添加到具有 border-radius 属性的父元素即可。

解释:
问题在于 flexbox 元素溢出了父元素，因此边框半径不适用于元素。
为了防止它们溢出它们的父级，您需要在以下示例中将 overflow:hidden; 添加到父级 .wrap :

.wrap {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}

.item {
  flex: 1;
  height: 100px;
  background: teal;
  margin-right: 5px;
}

.item:last-child {
  margin-right: 0;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>