CSS利用flex实现多列等高布局

501 阅读2分钟

Flex布局天然就具有等高布局的特性

源码

.box {
  display: flex;
}

.left {
  width: 300px;
  background-color: grey;
}

.center {
  flex: 1;
  background: red;
}

.right {
  width: 500px;
  background: yellow;
}

<div class="box">

    <div class="left">
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
    </div>
    
    <div class="center">2</div>
    
    <div class="right">
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
      1fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到fdsafasf发发送到
    </div>
    
    </div>
</div>

效果下图所示 image.png