[css] 第35天 使用flex实现三栏布局，两边固定，中间自适应

[haizhilin2013]

第35天 使用flex实现三栏布局，两边固定，中间自适应

[xiangshuo1992]

这就是圣杯布局国内也叫双飞翼布局，在第一天已经有回答了

第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现

同意里面的一个回答，现在有很多简单的实现方式，传统的这个也是一种hack的方式，真的没必要去追究了，但是核心知识点可以掌握。

1.把 center 放在最前面，优先渲染
2.相对定位 relative 也是可以设置 left,right等值的
3.margin 负值的了解和使用
4.float 真的不建议使用

现在的flex/grid很轻松就能实现，甚至绝对定位也是很容易实现也更容易理解。

[tzjoke]

<div class="container">
  <section class="left red"></section>
  <section class="middle blue"></section>
  <section class="right red"></section>
</div>

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.left,
.right {
  flex: 0 0 auto;
  width: 50px;
  height: 100%;
}

.middle {
  flex: 1 1 auto;
  height: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

[Vi-jay]

    .container {
      display: flex;
      height: 100px;
      .left, .right {
        width: 100px;
        background: #8c939d;
      }
      .content {
        flex: 1;
        background: #306eff;
      }
    }

[zhuyuedlut]

添一句，如果是让中间的content在网页渲染的先渲染，需要把content写在第一个

<div class="container">
    <section class="center"></section>
    <section class="left"></section>
    <section class="right"></section>
</div>

因此需要给center left right增加一个order属性

[zhangkuibao]

中间不设置宽度，设置flex：1；

[blueRoach]

    div{
      display: flex;
    }
    section{
      width: 200px;
      height: 100px;
      margin: 0 10px;
      background-color: red;
    } 
 <div>
    <section></section>
    <section style="flex: 1 0 auto"></section>
    <section></section>
  </div>

[smile-2008]

中间不设置宽度，设置flex：1；

[chenshijin1]

弹性盒子中 flex: 0 1 auto 表示什么意思

解释

三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。

1. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

三值语法

三个值的含义：

• 第一个 number 表示 flex-grow
• 第二个 number 表示 flex-shrink
• 第三个描述宽度的值表示 flex-basis

flex 各属性含义介绍

flex-grow

这个属性设置的是当前 flex 元素在 main-size 中的伸缩系数，main-size 指的是宽度和高度（由 flex-direction 属性控制），这个属性的默认值是 0。

flex 值越大，代表所占的空间越大。如下图所示，A、B、C、F 这几个元素设置的 flex 值为 1，而 D、E 元素设置的 flex 值为 2，所以 D 和 E 元素所占的比例就是其它几个的两倍。

flex-shrink

flex-shrink 属性设置的是 flex 元素的收缩系数。假设所有元素加起来的大小超出了 flex 容器，那么就需要用 flex-shrink 这个属性来控制如何收缩。它的默认值是 1。

如下图所示，A、B、C、D、E 这几个元素的大小超出了容器大小本身，A、B、C 设置的 flex-shrink 属性的值为 1，D 和 E 属性设置的值是 2，那么 D 和 E 这两个元素的大小会更小一点，这两个收缩的会更厉害一点。

flex-basis

这个属性设置的是一个 flex 元素的初始大小。它可以用以下几种值填充：

（1）宽度

flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;
复制代码

auto 是 flex-basis 的默认值

（2）内置调节大小的关键字

flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
复制代码

（3）根据内容自动调节大小

flex-basis: content;
复制代码

（4）全局值

flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

作者：卷帘依旧链接：https://juejin.cn/post/6844904182156115982

[Iambecauseyouare]

<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>