資訊專欄INFORMATION COLUMN
摘要：在這里，如果你設(shè)置的值非，而是其它一個(gè)符合或者屬性規(guī)則的值，那么對于計(jì)算這個(gè)值的規(guī)則和中塊級元素的計(jì)算規(guī)則是一樣樣的。同時(shí)放在了在上的，這里會長期寫一些關(guān)于的文章
我們知道，給一個(gè)元素A設(shè)置display: flex; ，那么A就是flex container，此時(shí)如果A元素有三個(gè)子元素A-1,A-2,A-3，那么這三個(gè)子元素便是A的flex item，我們可以給flex item設(shè)置flex-basis。這個(gè)flex-basis是干嘛的呢？先貼一段官方的巴拉巴拉：
This component sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. It accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword
大體意思就是，flex-basis指定了flex-item在主軸方向上的的初始大小，這個(gè)屬性接受同widh或者h(yuǎn)eight一樣的值，順便w3c還給新增了一個(gè)值content。
flex-basis的值auto的計(jì)算規(guī)則是，它會先檢索一下你是否設(shè)置了width（或者h(yuǎn)eight值，取決于flex-direction），如果設(shè)置了明確的非auto的width值（或者h(yuǎn)eight值），那么它就會用這個(gè)值，否則的話最后使用的值是content。在這里，如果你設(shè)置flex-basis的值非auto、content，而是其它一個(gè)符合width（或者h(yuǎn)eight）屬性規(guī)則的值，那么對于計(jì)算這個(gè)值的規(guī)則和css2中塊級元素的計(jì)算規(guī)則是一樣樣的。
那么，flex-basis和width（或者h(yuǎn)eight）的關(guān)系，目前（說不定啥時(shí)候就又變了呢，呵呵呵）只是當(dāng)flex-basis設(shè)置為auto且width（或者h(yuǎn)eight）不為auto時(shí)，計(jì)算flex-basis的used size時(shí)會用到width（或者h(yuǎn)eight）的值。
那么，來驗(yàn)證一下：
下圖，中間“電影”元素，flex:1;（對應(yīng)flex-basis的值為0） width在一直變化，但是并沒有影響“電影”的大小
/分割線/
下圖，中間“電影”元素，flex-basis:auto; width在一直變化，“電影”的大小也一直在變化
呵呵呵，看美隊(duì)3去。
同時(shí)放在了在github上的something of css，這里會長期寫一些關(guān)于css的文章
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115240.html
摘要：提綱介紹盒子模型什么是基礎(chǔ)項(xiàng)目實(shí)戰(zhàn)視頻源碼鏈接介紹參考文檔什么是層疊樣式表是層疊樣式表的縮寫。布局簡稱，布局是中一種新的布局模式，用于改進(jìn)傳統(tǒng)模式中標(biāo)簽對齊方向以及排序等等缺陷。主要用設(shè)置在容器里面嚴(yán)著主軸的排列方式。 提綱 CSS介紹 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...
摘要：容器仍然是，灰灰，小橘，需要一起減掉才可以。但是灰灰和小橘的瘦身能力明顯不一樣，他們設(shè)置了不同的，分別為和。瘦掉的這需要平分到灰灰加上小橘身上的每一個(gè)上。 前言 flex布局，想必css江湖上的各位俠士都用得很多了，那我們今天就來說說flex-item下的幾個(gè)不太常用的屬性吧（其實(shí)是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。 從容貌上來看，grow，shrink，grow，shri...
摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。 思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...
摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。 思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...
閱讀 2109·2023-04-26 02:41
閱讀 2153·2021-09-24 09:47
閱讀 1559·2019-08-30 15:53
閱讀 1214·2019-08-30 13:01
閱讀 1894·2019-08-29 11:27
閱讀 2867·2019-08-28 17:55
閱讀 1778·2019-08-26 14:00
閱讀 3393·2019-08-26 10:18
