[CSS]使用flex实现二联三联布局

嗓子疼谁心疼

已于 2024-03-29 10:04:49 修改

阅读量350

点赞数 2

分类专栏： css 文章标签： css javascript css3

于 2024-03-29 09:57:30 首次发布

本文链接：https://blog.csdn.net/qq_29069649/article/details/137135612

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 使用flex实现二联布局

思路：左侧为固定width，右侧为所有

<style type="text/css">
  .wrap {
    display: flex;
    justify-content: space-between;
  }

  .left,
  .right,{
    height: 100px;
  }

  .left {
    width: 200px;
    background: coral;
  }

  .right {
    flex:1;
    background: lightblue;
  }

  }
</style>
<div class="wrap">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

2. 使用flex实现三联布局

<style type="text/css">
  .wrap {
    display: flex;
    justify-content: space-between;
  }

  .left,
  .right,
  .middle {
    height: 100px;
  }

  .left {
    width: 200px;
    background: coral;
  }

  .right {
    width: 120px;
    background: lightblue;
  }

  .middle {
    background: #555;
    width: 100%;
    margin: 0 20px;
  }
</style>
<div class="wrap">
  <div class="left">左侧</div>
  <div class="middle">中间</div>
  <div class="right">右侧</div>
</div>