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

本文主要是介绍[CSS]使用flex实现二联三联布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这篇关于[CSS]使用flex实现二联三联布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---