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

haizhilin2013 · 2019-05-20T20:41:39Z

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

xiangshuo1992 · 2019-05-21T00:26:14Z

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

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

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

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

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

tzjoke · 2019-05-28T08:53:13Z

<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 · 2019-07-29T10:16:05Z

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

zhuyuedlut · 2019-08-05T02:03:53Z

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

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

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

zhangkuibao · 2019-09-19T02:19:19Z

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

blueRoach · 2020-07-06T08:34:41Z

    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>

MrZ2019 · 2020-10-21T09:35:37Z

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

chenshijin1 · 2020-12-04T08:45:25Z

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

解释

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

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
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 · 2023-03-20T05:58:39Z

  <div class="wrap">
      <div class="left">左侧</div>
      <div class="middle">中间</div>
      <div class="right">右侧</div>
  </div>

haizhilin2013 added the css css label May 20, 2019

haizhilin2013 mentioned this issue Jul 25, 2020

[html] 第467天写一个左中右的满屏布局，左右固定220px,中间自适应并且要优先加载 #2692

Open

haizhilin2013 mentioned this issue Aug 13, 2020

[html] 第486天写一个三栏布局，两边固定，中间自适应 #2773

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

haizhilin2013 commented May 20, 2019

xiangshuo1992 commented May 21, 2019

tzjoke commented May 28, 2019 •

edited

Vi-jay commented Jul 29, 2019 •

edited

zhuyuedlut commented Aug 5, 2019 •

edited

zhangkuibao commented Sep 19, 2019

blueRoach commented Jul 6, 2020 •

edited

MrZ2019 commented Oct 21, 2020

chenshijin1 commented Dec 4, 2020 •

edited

Iambecauseyouare commented Mar 20, 2023

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

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

Comments

haizhilin2013 commented May 20, 2019

xiangshuo1992 commented May 21, 2019

tzjoke commented May 28, 2019 • edited

Vi-jay commented Jul 29, 2019 • edited

zhuyuedlut commented Aug 5, 2019 • edited

zhangkuibao commented Sep 19, 2019

blueRoach commented Jul 6, 2020 • edited

MrZ2019 commented Oct 21, 2020

chenshijin1 commented Dec 4, 2020 • edited

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

解释

三值语法

flex 各属性含义介绍

flex-grow

flex-shrink

flex-basis

Iambecauseyouare commented Mar 20, 2023

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

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

tzjoke commented May 28, 2019 •

edited

Vi-jay commented Jul 29, 2019 •

edited

zhuyuedlut commented Aug 5, 2019 •

edited

blueRoach commented Jul 6, 2020 •

edited

chenshijin1 commented Dec 4, 2020 •

edited

`flex` 各属性含义介绍

`flex-grow`

`flex-shrink`

`flex-basis`