CSS记一些零碎点

flex-basis

  1. flex-basis 表示 items 被放入 flex 容器前的大小,也就是 items 的理想大小,不是真实大小(item 真实大小取决于 flex 容器的宽度)
  2. flex-basis 与 width 同时存在时,width 不生效,宽度取自flex-basis
  3. 只存在 width 或者 flex-basis,同时 items 的宽度和大于 flex 的宽度时,items 默认等比缩小(flex-shrink: 1)

应用准则: content -> width -> flex-basis (limited by max|min-width)

画分割线

  1. 使用伪元素和绝对定位
<div class="box">
  <div class="box-content">左</div>
  <div class="box-content">右</div>
</div>
.box {
  display: flex;
  align-items: center;
  width: 200px;
  height: 30px;
  background: #f27722;
  color: #fff;
}
.box-content {
  width: 50%;
  text-align: center;
}
/* 分割线 */
.divider {
  position: relative;
}
.divider::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  /* 画线 */
  width: 0;
  height: 20px;
  border-left: 1px solid #e8e8e8;
}
posted @ 2022-12-03 17:24  等等啦  阅读(9)  评论(0)    收藏  举报