有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅CSS

?简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

本期为大家带来的是双飞翼实现

? 一、flex布局推荐

在这里插入图片描述

flex: 1;【针对于中间盒子使用】
width: auto;【针对于中间盒子使用】

<template>
  <div class="container">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
  </div>
</template>

<style lang="less" scoped>
.container{
  display: flex;
  width: 100%;
  .left, .right {
    background: red;
    width: 200px;
    height: 200px;
  }
  .middle {
    flex: 1;
    background: blue;
    width: auto;/*宽度自适应*/
    height: 300px;
  }
}

</style>

? 二、浮动布局

在这里插入图片描述

float
margin-left: -100% margin-left: -200px

<template>
  <div class="container">
    <div class="middle">
      <div class="inner">双飞翼</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</template>

<style lang="less" scoped>
.container{
  width: 100%;
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background-color: #42b983;
    margin-left: -100%;
  }

  .middle {
    float: left;
    width: 100%;
    height: 500px;
    background: red;
  }

  .middle .inner {
    margin: 0 200px;
    height: 400px;
  }

  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
  }
}

</style>

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现双飞翼布局【flex布局和浮动布局】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。???记得一键三连呦!?