flex(一)

【曾以为CSS牛逼了,然而并没有系列】

暂且不谈flex和box什么关系。单一个flex的用法,宝宝就懵逼了。

flex这个东西跟background一样,被称为shorthand属性,复合属性,我的理解是可以作为一系列属性的缩写。

先从简单的来看,给父元素设置flex环境:

.parent {
    display: flex;
    /* width: 600px; */
    background-color: #eee;
    margin-top: 100px;
}

孩儿们设置固定宽高:

.child:nth-child(1) {
    background-color: salmon;
}
.child:nth-child(2) {
    background-color: skyblue;
}
.child:nth-child(3) {
    background-color: bisque;
}
.child {
    width: 100px;
    height: 100px;
}

效果是:乖乖依次排列,各自宽度为100px。


这时给child1单独设置一个flex:1

.child:nth-child(1) {
    background-color: salmon;
    flex: 1;
}

好哒,不管父元素多宽,除去child2、child3两个的宽度,都被child1占满了,也就是说child1已经完全抛弃了自己原来的宽度。


然后child1不动,再给child2单独设置一个flex:2,为了看清楚运算,父元素宽固定设置为600px。

.parent {
    display: flex;
    width: 600px;
    background-color: #eee;
    margin-top: 100px;
}
.child:nth-child(1){
    background-color: salmon;
    flex: 1;
}
.child:nth-child(2) {
    background-color: skyblue;
    flex: 2;
}

好哒,child3依然保持着100px,但child2、child1已经按照2:1的比例,平分了(parent-child3)的宽度


然后呢,child3也不干了,凭什么挤我一个,我也要设置一个flex:2
好哒,这个时候三个child都抛弃了自己原本的宽度,完全按照1:2:2的比例平分了parent的宽度,就算parent不固定宽度,也是一样的结果:

Paste_Image.png

以上就是单独一个flex的使用效果。


flex-grow什么鬼?默认是0我知道。

officially,指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
flex-grow: <number> 拒绝负值!拒绝黄赌毒

这就要讲一下“剩余空间”这个东西,顾名思义,就是parent减去孩儿们的宽度,剩下的空间。孩儿们设置了flex-grow这个东西,是要商量一下各自分配他们爹的剩余空间是多少的。

.child:nth-child(1){
    background-color: salmon;
    flex-grow: 1;
}
.child:nth-child(2){
    background-color: skyblue;
    flex-grow: 2;
}
.child:nth-child(3){
    background-color: bisque;
    flex-grow: 2;
}

好哒,这个时候父元素600-100*3,还剩300的剩余量,那么孩子们就会按照1:2:2的比例剐分这300的剩余,也就是:
child1:100+(300*1/(1+2+2))=160,
child2 == child3:100+(300*2/(1+2+2))=220



however!
这个时候我手一欠改了一下flex属性,变成了这样:

.child:nth-child(1){
    background-color: salmon;
    flex-grow: 1;
}
.child:nth-child(2){
    background-color: skyblue;
    flex: 2;
}
.child:nth-child(3){
    background-color: bisque;
    flex: 2;
}

为了效果明显,把parent的宽度改到了900px



然后就发生了我无法理解的事情!!谁能告诉我这260和320到底是怎么出来的?!。。
于是和无敌的众宝研究了一下,最终还是众宝查手册得出了结果,终于知道flex计算的时候到底经历什么(心也是够累了):
好的,这个问题我们最后来说。带着疑问先把flex-shrink和flex-basis讲完。


flex-shrink什么鬼?默认是1我知道。

officially,"指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例"。
flex-shrink: <number> 拒绝负值!拒绝黄赌毒

so,我的理解就是shrink只有在需要“缩”的时候才用得上,那就是子元素的宽度加起来超过了父元素的宽度。好了,伸的时候有福同享,缩的时候有难要同当了。这时候大家要“共享”空间才行,“共享”的原则就是按照各自的shrink来看到底谁该“缩”多少,shrink大就多“缩”,shrink小就少"缩",正所谓责任越大承担就越重。


flex-basis什么鬼?默认是auto我知道。

officially, “设置或检测弹性盒伸缩基准值”、“指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值”
flex-basis: <length>拒绝负值!拒绝黄赌毒 / <percentage>拒绝负值!拒绝黄赌毒 / auto / content(基于内容自动计算宽度)

也就说,作为孩子,我本身是有一个“基准”宽度的。在flex-basis:auto的情况下,取的是width的值;在flex-basis:0的情况下,width有值也是没啥用的。
其实不管什么时候,basis和grow、shrink是要配合着一起来用的,只不过没有明显设置的时候,都取了他们的默认值。


flex为一个值的时候,默认都表示什么(flex: grow shrink basis)

  • flex : 1 [ flex: 1 1 0%]
  • flex : auto [ flex: 1 1 auto]
  • flex: none [ flex: 0 0 auto]
  • flex: 0 auto [ flex: initial] [ flex: 0 1 auto]

了解了basis、grow、shrink到底是干什么用的之后,总结一下下:

在flex环境下,计算的步骤
  1. basis1 + basis2 + basis3 (假设其和是basisAll)
  2. 比较父元素宽度(parentWidth)和basisAll的大小
  3. parentWidth > basisAll,说明有剩余空间,需要“伸”
    怎么“伸”呢:
    (parentWidth-basisAll)按照各自grow的比例(g1、g2、g3)分配给孩儿们,孩儿们拿着分到的growWidth加上原来的basis,就是各自最终的宽度。
    childWidth1 = basis1 + (parentWidth-basisAll)*(g1/(g1+g2+g3))
    childWidth2 = basis2 + (parentWidth-basisAll)*(g2/(g1+g2+g3))
    childWidth3 = basis3 + (parentWidth-basisAll)*(g3/(g1+g2+g3))
  4. parentWidth < basisAll,说明爹的空间不够用,需要“缩”
    怎么“缩”呢:
    计算basis1*shrink1 + basis2*shrink2 + basis3*shrink3(假设和为basisShrinkAll),总的溢出量basisAll-parentWidth
    basisAll-parentWidth按照各自shrink的比例(s1、s2、s3)分配给孩儿们(和grow的计算有所不同)然后孩儿们用自己的basis减去分给自己的这个量。
    childWidth1 = basis1 - (basis1*shrink1/basisShrinkAll * (basisAll-parentWidth))
    childWidth2 = basis2 - (basis2*shrink2/basisShrinkAll * (basisAll-parentWidth))
    childWidth3 = basis3 - (basis3*shrink3/basisShrinkAll * (basisAll-parentWidth))

好了,现在回头去看刚才宝宝懵逼的那个情况:

.child:nth-child(1){
    background-color: salmon;
    flex-grow: 1; 
   //相当于是flex在initial( 0 1 auto)的情况下,加了一个flex-grow,变成了flex: 1 1 auto,basis是auto,取其width的值100px
}
.child:nth-child(2){
    background-color: skyblue;
    flex: 2; //flex: 2 2 0%
}
.child:nth-child(3){
    background-color: bisque;
    flex: 2; //flex: 2 2 0%
}
//parent宽度为900px, 孩子们各自的宽度为100px(相当于flex-basis)

我们一步步来算下:

  1. 三个basis相加100px+0+0 < parentWidth(900px),因此要“伸”
  2. 剩余空间为900px-100px == 800px
  3. 把这800px按照1:2:2的比例分配给child1、child2、child3(160px、320px、320px)
  4. 最终结果:
    child1 == 100px + 160px == 260px、
    child2 == 0 + 320px == 320px、
    child3 == 0 + 320px == 320px。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,451评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,376评论 0 26
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 3,349评论 0 27
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,505评论 0 1
  • 秋意起,秋风凉。独坐窗边,桂子飘香,我坐在时光的缝隙里,遥望远方…… (一)相遇与离别 相遇离别终有时...
    鹿鸣阁主阅读 614评论 4 5