CSS实现三栏布局的三种方式

时间：2023-03-28 14:24:27 HTML

需求说明三栏布局在我们的生活中很常见，一般要求两边宽度固定，中间宽度自适应。比如下面这种情况：现在让我们自己实现一下，假设我们有如下html代码，需要三栏布局。左

center

右

结果如下：最简单的方法是用flex或者grid。它们旨在处理此类情况。1、grid是通过设置最外层为grid布局来实现的。然后将内容分成三列，中间一列的宽度为auto。如果我们还需要设置每列的间距，也可以使用column-gap属性。代码如下：.column-container{display:grid;网格模板列：200px自动200px；column-gap:10px;}2.Flex实现将容器设置为flex布局。左右宽度固定后，在中间的column:1属性中添加flex:1属性，代码如下：.column-container{display:flex;column-gap:10px;}.left,.right{width:200px;}.center{flex:1;}flex还有一个很有意思的属性是order，假设HTML代码如下，需要把center放在中间。居中左右我们可以通过设置order属性对flex中的内容进行排序。.left{order:0;}.center{order:1;}.right{order:2;}3.不再推荐传统的float布局方式，原因如下：代码实现不够简洁灵活是比较低，加边距的时候比较麻烦。检查响应区域的适配情况。不过，我们也可以将其与前面的flex和grid方法进行对比，结果如下：代码实现：.left{width:200px;浮动：左；}。右{宽度：200px；浮动：右；}.center{宽度：100%；}

上一篇：零基础教你学前端——75.CSS边距

下一篇：《进阶》中关于VueRouter核心原理的5个问题你知道吗？

CSS实现三栏布局的三种方式相关文章