亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【備戰春招】第4天 flex基礎與應用(三)

標簽:
Html/CSS

课程章节: flex基础与应用

课程讲师大谷

课程内容:

其他属性相关属性值:

(1) flex-basis: 设置弹性盒伸缩基准值。

(2) flex-grow:设置弹性盒子的扩展比率。

(3) flex-shrink:设置弹性盒子的缩小比率。

(4) flexflex-growflex-shrinkflex-basis的缩写。

当我们想要实现子元素以基准值为准,不以宽度为准,那么我们可以给子元素设置flex-basis属性,实现的效果如下,此时子元素的宽度就会失效。除了使用像素,我们还可以使用百分比,rem等单位设置基准值。我们可以设置某一个元素的基准值还可以设置全部子元素的基准值。
图片描述

当我们想要实现子元素的宽度为子元素原有宽度+父元素剩余宽度的一半,我们就可以使用flex-grow属性值,使用方法如下,其中flex-grow的值是整数,用来表示占用父元素剩余宽度的几份,比如第一个子元素宽度是100,第二个子元素宽度也是100,父元素宽度为400,那么剩余宽度就是400-100-100=200,意思就是剩余宽度就是父元素减去所有子元素的宽度,然后又因为设置的数值为1,有两个子元素,那么就是2份,那么两个子元素就会再原有的基础上平均分了200/2=100,所以这就是为什么下面的代码每个元素的宽度为200。如果想要哪个子元素分的份数更多,就可以将某个子元素设置的数字大一些。
图片描述

上一个讲的是将剩余部分平分,而flex-shrink是将超出的部分进行平分,当父元素是400,两个子元素都是300,那么总共超出了200,我们将各自子元素的份数相加,然后平均分给两个子元素。所以每个子元素分到的应该是300,具体设置的代码如下:
图片描述

我们可以将flex-grow: 1, flex-shrink: 2, flex-basis: 300px;简写为flex: 1 2 300px;,我们需要的注意的是这个顺序是固定的,不要写错了,第一个值是扩大比率,第二个值是缩小的比率,第三个是基准值。

课程收获:

这一章主要学习了flex中的flex-growflex-shrink以及flex-basis属性值的使用。我们有几点需要注意,一是flex-basis基准值设置后,宽度就会失效。二是使用flex-growflex-shrink的时候,flex-grow是平均按设置的比例划分父元素剩余的宽度,flex-shrink是划分子元素之和超出父元素的比例。第三点就是我们在简写这三个属性值,顺序不能写错了,顺序分别是flex-growflex-shrinkflex-basis,三个属性之间用空格隔开。熟练使用这几个属性有利于我们对元素进行合理的排版。

點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消