-
問題是這樣的殃饿，我們業(yè)務(wù)里，有一個(gè)高度是根據(jù)配置來(lái)的芋肠，這也就意味著：內(nèi)容可能很少乎芳，高度很高。比如：內(nèi)容大概只有300的高度帖池，但父級(jí)的高度是800奈惑，然后我的樣式如下圖。
image.png -
結(jié)果導(dǎo)致了如下效果睡汹，測(cè)試同事提出了bug肴甸。
image.png 這明顯不是我們想要的，是有問題的囚巴，但是為什么會(huì)導(dǎo)致這個(gè)問題呢原在？是margin-bottom設(shè)置的有問題么？不是彤叉，我設(shè)置的是10像素庶柿。
那是什么情況呢，有可能是flex布局的問題秽浇。
-
然后浮庐，找答案，發(fā)現(xiàn)果然柬焕，flex有這樣一個(gè)
align-content的屬性审残，默認(rèn)值是stretch，元素被拉伸以適應(yīng)容器击喂。
菜鳥教程.png -
接著维苔，結(jié)合其他屬性的值，我想著懂昂，應(yīng)該會(huì)有一個(gè)start的屬性介时，來(lái)不讓其拉伸，果然,正是
flex-start,當(dāng)設(shè)置這個(gè)屬性以后，bug解決沸柔！
image.png
bug修復(fù)后.png 反思循衰，flex好久沒有認(rèn)真用了，之前也沒遇到過(guò)這種情況褐澎，所以導(dǎo)致這塊知識(shí)點(diǎn)認(rèn)識(shí)不夠会钝。這也是之前，對(duì)知識(shí)總是淺嘗輒止所導(dǎo)致工三，全局觀不夠迁酸。
不過(guò)從中也吸取了經(jīng)驗(yàn)，以后俭正，工作時(shí)奸鬓，持續(xù)每天解決一個(gè)問題，在此記錄掸读。
每天解決1個(gè)問題：flex布局行距被拉大了，如何處理喂走？
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門催式，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人避归，你說(shuō)我怎么就攤上這事」芎牵” “怎么了梳毙？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我，道長(zhǎng)掠哥，這世上最難降的妖魔是什么渺贤？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮枕屉，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己廓奕，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著桌粉，像睡著了一般蒸绩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上铃肯，一...
- 那天患亿，我揣著相機(jī)與錄音，去河邊找鬼押逼。 笑死步藕，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的挑格。 我是一名探鬼主播咙冗，決...
- 文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼恕齐！你這毒婦竟也來(lái)了乞娄？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤显歧，失蹤者是張志新（化名）和其女友劉穎仪或，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體士骤，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡范删，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拷肌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片到旦。...
- 正文 年R本政府宣布搁骑，位于F島的核電站，受9級(jí)特大地震影響又固，放射性物質(zhì)發(fā)生泄漏仲器。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一仰冠、第九天 我趴在偏房一處隱蔽的房頂上張望乏冀。 院中可真熱鬧，春花似錦洋只、人聲如沸辆沦。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)众辨。三九已至端三，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間鹃彻，已是汗流浹背郊闯。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長(zhǎng)得像谨履，于是被迫代替她去往敵國(guó)和親欢摄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 今天剛剛寫完第一個(gè)靜態(tài)頁(yè)面害捕，大概一千行代碼绿淋，深感自己的技術(shù)還很不夠，需要大力修煉尝盼。在最近感覺flex這個(gè)屬性特別重...
- CSS3引入的布局模式Flexbox布局吞滞，主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度，高度盾沫，以最佳方式填充可用...
- Flex 布局可以實(shí)現(xiàn)空間自動(dòng)分配裁赠、自動(dòng)對(duì)齊Flex 適用于簡(jiǎn)單的線性布局，復(fù)雜布局使用 Grid 布局注意：設(shè)為...
- 阮一峰Flex布局文檔貼在這了赴精，講的已經(jīng)非常詳細(xì)了佩捞，本文主要是總結(jié)下，便于自己今后快速回顧蕾哟。 Flex布局是什么 ...
