必刷前端面试题：flexbox和多栏布局在这个系列里我会为大家讲解一些前端面试里有关css的常考题。在面试官问到我们有关

在这个系列里我会为大家讲解一些前端面试里有关css的常考题。在面试官问到我们有关css的问题时，很有可能会问到这些问题。

flexbox

flexbox是什么？

flex是一种布局方式，可以简便完整响应式的实现页面布局，容器中默认存在两条轴，主轴，交叉轴，默认x轴为主轴，可以用flex-direction来修改主轴的方向。

flexbox的作用

可以控制子元素在主轴上的对齐方式
可以控制子元素在交叉轴上的对齐方式
可以控制子元素缩放比例，排列顺序
可以实现元素水平和垂直居中
可以实现多栏布局

多栏布局怎么实现

以三栏布局为例：

flex //弹性布局

//html
<div class="wrap">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
</div>
  
//css
.wrap{
      height: 200px;
      display: flex;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      flex: 1;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
    }

使用display:flex将父容器设置为 Flex 容器，固定left盒子和right盒子的宽高同时在content盒子设置flex:1，来控制content容器在布局中占据剩下的宽度。此时如果更改页面的宽度，content盒子的宽度会自适应改变。

grid // 网格布局

// html
<div class="wrap">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
</div>
  
// css
 .wrap{
      height: 200px;
      display: grid;
      grid-template-columns: 200px 1fr 200px;
    }

display:grid的作用是将容器变成网格布局， grid-template-columns: 200px 1fr 200px的作用是将wrap盒子分为三列，左右两列分别为200像素宽，中间一列占据剩余空间从而达到三栏布局中间自适应的目的。

左右先加载内容后加载：float + margin

// html
<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="content">content</div>
</div>

// css
.wrap{
      height: 200px;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: right;
    }

将中间区域的盒子在html中的代码放到左右盒子的后面执行，然后在css代码中给左右盒子分别向左和向右浮动。

圣杯布局：float + margin负值 + position:relative

// html
<div class="wrap">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

// css
 .wrap{
      height: 200px;
      padding: 0 200px 0 200px;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      float: left;

    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

使用浮动将左右两列移动到页面的两侧，通过负边距来调整各列的位置，使用相对定位将中间列向左或向右移动。

双飞翼布局：float + margin负值

// html
<div class="container">
  <div class="column column-main">Main Column</div>
</div>
<div class="column column-left">Left Column</div>
<div class="column column-right">Right Column</div>

// css
.container {
  float: left;
  width: 100%;
}

.column {
  float: left;
}

.column-main {
  width: 100%;
}

.column-left {
  float: left;
  width: 200px;
  margin-left: -100%;
}

.column-right {
  float: left;
  width: 200px;
  margin-left: -200px;
}

使用浮动将左右两列移动到页面的两侧，对中间列内部的内容进行包裹，使其在左右两列之间自适应。使用负边距调整各列的位置，以确保它们正确地对齐并占据正确的空间。