美文网首页
weex align-self align-items

weex align-self align-items

作者: 菜鸟何时起飞 | 来源:发表于2021-10-16 21:37 被阅读0次

使用这个两个属性 父容器必须有宽度 或者宽度能够被计算出来

<div class="card-box">
      <div class="first-card" />
      <div class="second-card" />
      <div class="main-card" />
 </div>
.card-box {
  height: 320px;
  width: 678px;
  align-items: center;
}

.first-card {
  width: 638px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FFD8BF, #FFB7D1);
  position: absolute;
  border-radius: 40px;
}

.second-card {
  width: 658px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FFCFB0, #FD95BA);
  position: absolute;
  top: 12px;
  border-radius: 40px;
}

.main-card {
  width: 678px;
  height: 290px;
  background-image: linear-gradient(-148deg, #FEAB76, #F95E95);
  box-shadow: 0 10px 30px 0px rgba(255,173,149,0.50);
  top: 30px;
  border-radius: 40px;
}

相关文章

网友评论

      本文标题:weex align-self align-items

      本文链接:https://www.haomeiwen.com/subject/mptioltx.html