Bootstrap

flex布局 如何实现各行元素的高度自适应

css——flex布局

display:flex 如何实现各行元素的高度自适应
在这里插入图片描述

//先定义一个最大的容器为弹性盒子,子元素为横向排布
.list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    //  使每个弹性盒子保持自身的高度,并位于容器顶部
      align-items: flex-start;
  }

//横向排布的两个子元素都设置为纵向排布的弹性盒子
.list_item{
        width:50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
           }
           
.items {
            width:78%;
            background-color: #99cccc;
            padding: 20rpx;
            margin-top: 20rpx;
            border-radius: 30rpx;
  
            }

;