Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

xiangshuo1992

xiangshuo1992 commented on May 21, 2019

@xiangshuo1992
Contributor

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

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

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

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

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

tzjoke

tzjoke commented on May 28, 2019

@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

Vi-jay commented on Jul 29, 2019

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

Lucenova commented on Aug 5, 2019

@Lucenova

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

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

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

zhangkuibao

zhangkuibao commented on Sep 19, 2019

@zhangkuibao

中间不设置宽度,设置flex:1;

blueRoach

blueRoach commented on Jul 6, 2020

@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

smile-2008 commented on Oct 21, 2020

@smile-2008

中间不设置宽度,设置flex:1;

chenshijin1

chenshijin1 commented on Dec 4, 2020

@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 值越大,代表所占的空间越大。如下图所示,ABCF 这几个元素设置的 flex 值为 1,而 DE 元素设置的 flex 值为 2,所以 DE 元素所占的比例就是其它几个的两倍。

flex-grow

flex-shrink

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

如下图所示,ABCDE 这几个元素的大小超出了容器大小本身,ABC 设置的 flex-shrink 属性的值为 1DE 属性设置的值是 2,那么 DE 这两个元素的大小会更小一点,这两个收缩的会更厉害一点。

flex-shrink

flex-basis

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

(1)宽度

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

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

Iambecauseyouare commented on Mar 20, 2023

@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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@xiangshuo1992@blueRoach@Vi-jay

        Issue actions

          [css] 第35天 使用flex实现三栏布局,两边固定,中间自适应 · Issue #129 · haizlin/fe-interview