第35天 使用flex实现三栏布局,两边固定,中间自适应
Activity
xiangshuo1992 commentedon May 21, 2019
这就是圣杯布局国内也叫双飞翼布局,在第一天已经有回答了
第1天 圣杯布局和双飞翼布局的理解和区别,并用代码实现
同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握。
1.把 center 放在最前面,优先渲染
2.相对定位 relative 也是可以设置 left,right等值的
3.margin 负值的了解和使用
4.float 真的不建议使用
现在的flex/grid很轻松就能实现,甚至绝对定位也是很容易实现也更容易理解。
tzjoke commentedon May 28, 2019
Vi-jay commentedon Jul 29, 2019
Lucenova commentedon Aug 5, 2019
添一句,如果是让中间的content在网页渲染的先渲染,需要把content写在第一个
因此需要给center left right增加一个order属性
zhangkuibao commentedon Sep 19, 2019
中间不设置宽度,设置flex:1;
blueRoach commentedon Jul 6, 2020
smile-2008 commentedon Oct 21, 2020
中间不设置宽度,设置flex:1;
chenshijin1 commentedon Dec 4, 2020
弹性盒子中 flex: 0 1 auto 表示什么意思
解释
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis,默认值为
0 1 auto
。三值语法
三个值的含义:
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)宽度
(2)内置调节大小的关键字
(3)根据内容自动调节大小
(4)全局值
作者:卷帘依旧链接:https://juejin.cn/post/6844904182156115982
Iambecauseyouare commentedon Mar 20, 2023