关于前端:CSS-实现三栏布局的3种方式

需要形容

三栏布局在咱们生存中很常见，个别要求的是两边宽度固定，两头自适应宽度。比如说如下状况：

当初让咱们本人来实现，假如咱们有如下 html 代码，要求实现三栏布局。

<div class="column-container">
  <div class="column left">left</div>
  <div class="column center">center</div>
  <div class="column right">right</div>
</div>

后果如下：

最简略是形式是用 flex 或者 grid。他们被设计进去的目标就是应酬这类场景的。

1. grid 实现

通过把最外层设置为 grid 布局。再把内容划分为三列, 两头列的宽度为 auto，如果咱们还须要设置每列的间距，还能够利用column-gap 属性。代码如下：

.column-container {
  display: grid;
  grid-template-columns: 200px auto 200px;
  column-gap: 10px;
}

2. flex 实现

设置 container 为 flex 布局，左右宽度固定后，两头列加上 flex: 1 属性，代码如下：

.column-container {
  display: flex;
  column-gap: 10px;
}
.left,
.right {width: 200px;}
.center {flex: 1;}

flex 还有个很有意思的属性是order, 假如 HTML 代码如下，须要把 center 放在两头。

<div class="column-container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

咱们能够通过设置 order 属性来对 flex 外面的内容进行排序。

.left {order: 0;}
.center {order: 1;}
.right {order: 2;}

3. 传统的 float 布局

这个办法咱们当初曾经不举荐了，起因如下：

1. 代码实现起来不简洁
2. 灵活性也比拟低, 加边距的时候麻烦。
3. 在响应式这块适配比拟查。

不过咱们也能够通过和之前的 flex,grid 两种办法进行比照，后果如下：

代码实现：

.left {
  width: 200px;
  float: left;
}
.right {
  width: 200px;
  float: right;
}
.center {width: 100%;}