flex布局常用小技巧

注意：使用flex布局后浮动和清除浮动不生效
1、flex独占一行内 实现子元素等高

<div class="card-row-flex">
      <div class="col-lt"></div>
      <div class="col-rt">
        <div class="t1"></div>
        <div class="t2"></div>
      </div>
    </div>

.card-row-flex{
  display: flex;
}
.col-lt{
  flex: 0 0 100px;
  background: rgb(245, 161, 113);
}
.col-rt{
  flex: 1 1 auto;
}
.t1{
  background: #333;
  height: 60px;
}
.t2{
  background: #777;
  height: 100px;
}

效果图如下：

2、flex实现独占一行并且子元素按照数量均分

<!-- flex实现独占一行并且子元素按照数量均分 -->
    <div class="card-row-flex">
      <div class="col-item"></div>
      <div class="col-item">
        <div class="t1"></div>
        <div class="t2"></div>
      </div>
    </div>

.card-row-flex{
  display: flex;
}
.col-item{
   flex: 1 1 auto;
   background: rgb(134, 19, 250);
}
.t1{
  background: #333;
  height: 60px;
}
.t2{
  background: #777;
  height: 100px;
}

效果图如下：

后续补充