css中flex 怎麼使用-tft每日頭條

css中flex 怎麼使用

生活更新时间:2024-08-12 18:12:00

什麼是flex布局

2009年，W3C提出了一種新的方案--Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前在不考慮IE以及低端安卓機（4.3-）的兼容下，已經可以放心使用flex進行布局了。什麼是flex布局以及它的好處，這裡就不再贅述，如果還沒有學的話，可以搜索阮一峰大佬的 flex 布局攻略。

坑1，圖片失真

如果父元素設置為 display: flex，且其子元素為圖片的話，則圖片設置寬高，但寬高不生效出現失真問題，這個問題我在H5和微信小程序中都有發現。

eg：

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）1

解決方法有兩個；

1、在圖片外層包裹一層元素，比如原結構為：

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）2

改為：

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）3

感覺這種不是很,好，無故多了一層元素結構，所以推薦使用第二種：

2、給父元素下的圖片子元素改為：

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）4

這樣就可以啦！

justify-content: center;不生效

當父元素設置display：flex，其子元素設置flex：1平分父元素寬度之後，再給子元素設置flex ,justify-content: center;無法對子元素下的有定位子元素生效。

eg：

weex：

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）5

css(weex中默認每個元素都有默認display: flex):

css中flex 怎麼使用（解決css使用flex布局偶爾會踩的兩個小坑）6

解決方法，将 flex:1 ,改為固定寬度。。。

ps: 第二個坑很難發現，如果疑問，可以留言。。感覺不容易解釋。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活做心髒檢查需要哪些步驟
當出現心慌、胸悶、憋氣等症狀，要警惕心髒出現了問題，需要及時到醫院心内科就診。但心内科的檢查手段非常多，如心電圖、彩超、CT、造影等等，不少人對這些檢查方法及注意事項不了解，經常會有一些疑問，如“我需要做什麼檢查”“這些檢查能不能隻做一項”... 2023-01-24
生活四甲基氯化铵國标
國家标準化管理委員會公布：氯化铵國家标準GB/T2946-2018，自2018年12月1日起開始實施。新标準增加了砷、镉、鉛、鉻、汞及其化合物限量要求，增加粒狀農業用氯化铵的顆粒平均抗壓碎力要求，産品最大批量由500t調整為1000t，增加... 2023-02-04
生活排骨炖白蘿蔔湯的做法
排骨炖白蘿蔔湯的做法?白蘿蔔500克、排骨500克、枸杞15克、鹽5克、姜片10克、胡椒粉2克、清水适量，我來為大家科普一下關于排骨炖白蘿蔔湯的做法?下面希望有你要的答案，我們一起來看看吧!排骨炖白蘿蔔湯的做法白蘿蔔500克、排骨500克、... 2022-06-01
生活釣草魚用的玉米怎麼泡
釣草魚用的玉米怎麼泡?用玉米粒來泡酒，在選用玉米粒的時候，可以選擇多種不同的玉米粒一起浸泡也就是說不要隻用老的玉米粒，也不要隻用嫩的玉米粒，可以兩種合在一起浸泡這樣在打窩的時候，更容易吸引魚情另外，黃色的玉米粒和白色的玉米粒也可以混合着泡料... 2022-06-05
生活東北人咋樣
東北人咋樣?東北人不怎麼讓人待見是自身原因造成的，沒有人生下來會對誰有偏見，你們的行為決定了你們的發展，，我來為大家科普一下關于東北人咋樣?下面希望有你要的答案，我們一起來看看吧!東北人咋樣東北人不怎麼讓人待見是自身原因造成的，沒有人生下來... 2023-01-22
生活我的世界精靈寶可夢合成表
我的世界精靈寶可夢合成表?常用工具：PC、醫治者、鐵砧化石吸塵器、化石機、化石集齊坦克，我來為大家科普一下關于我的世界精靈寶可夢合成表?以下内容希望對你有幫助!我的世界精靈寶可夢合成表常用工具：PC、醫治者、鐵砧。化石吸塵器、化石機、化石集... 2022-06-14
生活韓國冰糖草莓的做法
酸酸甜甜的味道，沁人心脾的清香，鮮美多汁的果肉，草莓在早春已經上市。因為它具有潤肺﹑健脾﹑益氣﹑明目養肝的作用，特别适宜春天養生食用，所以被營養學家譽為是“春天第一果”，對老人、孩子和體虛者而言，是滋補的佳品。春季陽氣上升，再加上多風幹燥，... 2023-02-09
生活吃幾個火龍果對便秘有好處
便秘是困擾很多人的難言之隐，秋季幹燥，更易發生便秘。近日，美國“每日健康網”刊出“緩解便秘的食物”，可供大家參考。漿果。草莓、藍莓和黑莓等漿果熱量低，水分和膳食纖維含量高。膳食纖維有助促進胃腸蠕動，在通過腸道時能保持水分，對排洩物起到軟化濕... 2023-01-17
生活銀灰色上衣配什麼圍巾
銀灰色上衣配什麼圍巾?黑色羊絨圍巾黑色是比較百搭的顔色，黑色羊絨圍巾是比較有質感，又非常大氣的單品，搭配灰色羊絨大衣，配色經典、大方，今天小編就來說說關于銀灰色上衣配什麼圍巾?下面更多詳細答案一起來看看吧!銀灰色上衣配什麼圍巾黑色羊絨圍巾黑... 2022-06-15
生活目前公認酶與底物結合方式的假說
圖片說明：鐵硫簇（a[2Fe-2S]cluster）。圖片來源：C.ToddReichart在金屬原子簇這一活性位點的幫助下，酶支配着很多基本的生物過程，比如光合作用、固氮作用和呼吸作用。但是科學家們還不了解酶這一功能的基本信息，因為這些對... 2023-03-08
生活這才是對演員身份最大尊重
長紅如你，長情如我。世間縱有風情萬種，我任情有獨鐘。作為一枚不敬業的修仙粉，你說我是路人吧，一年又會間歇性狂熱那麼一陣子，每次看見嘉倫有重大利好上熱搜還是會心中狂喜；說我是個粉絲吧，看我這以年為單位的更新頻次，100來個粉絲還沒掉光光，可見... 2023-02-16
生活鴿子屬于鳥類嗎
鴿子屬于鳥類嗎?鴿子屬于鳥類世界各地廣泛飼養，鴿是鴿形目鸠鴿科數百種鳥類的統稱我們平常所說的鴿子隻是鴿屬中的一種，而且是家鴿，家鴿中最常見的是信鴿，主要用于通訊和競翔鴿子和人類伴居已經有上千年的曆史了，考古學家發現的第一幅鴿子圖像，來自于公... 2022-07-18
生活朱熹的詩詞和名言
朱熹（1130—1200），字元晦，号晦庵，别稱考亭先生，南宋徽州婺源人。宋高宗紹興十八年進士。曾在白鹿洞書院和嶽麓書院講學。著有《四書章句集注》、《朱子語類》等書，門人輯有《朱子大全》。朱熹四首詩，經久不衰成為千古傳誦的佳句。一、《泛舟》... 2022-11-13
生活水光針親身經曆者
近年來，輕醫美項目越來越受到愛美人士的青睐。其中，水光針因為價格可選範圍大、見效快等特點，迅速在醫美圈掀起熱潮，成為備受追捧的爆款。水光針的主要成分是玻尿酸，目前一劑的價格從幾百元到數千元，甚至上萬元不等，購買者絡繹不絕。多名醫美機構工作人... 2022-12-28
生活啞鈴的作用和鍛煉方法
啞鈴一直大家最喜歡的訓練器材，雖然沒有杠鈴那般力拔千鈞，但是在很多方面确實比杠鈴更有優勢！手頭隻要有一副杠鈴，就算沒有健身房那麼多固定器械，這也難不倒想鍛煉的你，現在來說一下啞鈴訓練的優點和好處吧！1、體積小，靈活，想健身随時随地都可以，不... 2022-11-10
生活中控智慧JDU30的dat文檔怎樣打...
中控智慧JDU30的dat文檔怎樣打開?看文件大小：察看dat文件的大小打開小型文件：如果隻有十幾k的，可以雙擊選擇記事本打開如果是加密的文件，就可能出現亂碼了，今天小編就來說說關于中控智慧JDU30的dat文檔怎樣打開?下面更多詳細答案一... 2022-06-17
生活紀曉岚4劇情
紀曉岚4劇情?第二章啪嗒，現在小編就來說說關于紀曉岚4劇情?下面内容希望能幫助到你，我們來一起看看吧!紀曉岚4劇情第二章啪嗒一雙筷子落在了地上，阿桂說，“什麼，彥成不見了，還不趕緊去找。閱微草堂紀曉岚抽着大煙袋，小月說，“老爺，阿桂老爺不是... 2023-01-25
生活增加空氣濕度的最好方法
增加空氣濕度的最好方法?利用空瓶、水罐，盛裝清水放在房間各處，我來為大家講解一下關于增加空氣濕度的最好方法?跟着小編一起來看一看吧!增加空氣濕度的最好方法利用空瓶、水罐，盛裝清水放在房間各處家居中經常會看到裝飾用的花瓶、水罐，瓷器等物品，到... 2022-06-16
生活秋冬穿搭推薦趕緊買起來
在秋冬季節穿搭中很多女生都會将搭配上的重點集中在衣服的搭配上，其實想要穿出時尚感的話，要在全局出發，在整體搭配上呈現出更多的時尚感的話，一定要懂得在搭配的時候既關注衣服的搭配是否合理，也要選對合适的鞋子，這樣才能夠穿出整體搭配上的和諧感與時... 2022-12-01
生活關于妝前打底步驟
關于妝前打底步驟?妝前打底步驟是：隔離——粉底液——遮瑕——散粉，現在小編就來說說關于關于妝前打底步驟?下面内容希望能幫助到你，我們來一起看看吧!關于妝前打底步驟妝前打底步驟是：隔離——粉底液——遮瑕——散粉。首先先上隔離霜，隔離霜是護膚的... 2022-06-16
生活李清照婉約派有哪些
李清照，号易安居士，山東曆城（濟南市）人，一說山東濟南章丘人，宋代傑出的女詞人，婉約詞派代表，“詞壓江南，文蓋塞北”，有“千古第一才女”之稱。李清照1084年出生于一個世代仕宦之家。她的父親李格非進士出身，官至禮部員外郎，是當時極有名氣的作... 2022-12-29
生活顧城最有名的10首詩
1.黑夜給了我黑色的眼睛，我卻用它尋找光明。——《一代人》2.我失去了一隻臂膀，就睜開了一隻眼睛。——《楊樹》3.我在幻想着，幻想在破滅着；幻想總把破滅寬恕，破滅卻從不把幻想放過。——《我的幻想》4.陽光，在天上一閃，又被烏雲掩埋；暴雨沖洗... 2022-11-12
生活大同洗浴兒童泡澡
“我們為孩子辦的這張卡，當初說好可以讓孩子照相、遊泳。可是今年5月，該會所突然關門，我們卡上的錢既沒退還，也沒人告知我們該怎麼處理。”近日，王女士等多位市民反映了自己的遭遇。去年6月，王女士在位于北都街的一家集照相與遊泳為一體的兒童娛樂性會... 2023-01-25
生活琉璃裡禹司鳳真實身份是什麼
琉璃裡禹司鳳真實身份是什麼?《琉璃》裡禹司鳳是離澤宮弟子，天賦異禀，聰慧冷靜，他在參加簪花大會時遇到六識不全的褚璇玑，兩人在相處中關系越來越親密，璇玑沒有心，她把司鳳當成好朋友，但是司鳳卻對璇玑動了真情，為了她受盡苦難，其實司鳳的真實身份很... 2022-06-22
生活凱迪拉克到底有多不保值
說到美系車，很多人都會感覺不保值，今天我就來颠覆一下這個認知。那我們以凱迪拉克SUVXT4舉例和大家探讨一下。說到凱迪拉克XT4，這款車可以說是一款寶藏SUV，極緻的性能，豪華的内飾，以及不錯的保值率，您沒聽錯，XT4在20萬以上SUV保值... 2023-03-13
生活又是一年夏耕季節
來源：經濟日報2月18日，位于安徽省合肥市肥東縣撮鎮鎮的安徽一元菜生态有限公司蔬菜基地内，工人忙着采收、搬運蔬菜。阮雪楓攝2月18日，江西省贛州市章貢區華星源農機有限公司，農戶正在選購農機。胡江濤攝湖南：搶抓農時集中育秧經濟日報-中國經濟網... 2022-11-12
生活春季美白小貼士
春季美白小貼士?盡量避免紫外線強的時候外出如果不是一定要外出，避免在早上10點至下午2點出去，因為此時陽光中的紫外線最強，對肌膚的傷害也最厲害，我來為大家講解一下關于春季美白小貼士?跟着小編一起來看一看吧!春季美白小貼士盡量避免紫外線強的時... 2022-06-07
生活大箭頭符号怎麼放大
箭頭符号可能是人類圖形史上最偉大的創造。是的，這隻是一個箭頭，一個最常見不過的圖标，但如何把它放在合适的位置，如何不過度的濫用這個符号，卻是我們每一位設計師不得不每天面對的問題。足夠簡單的圖形承載着豐富而又抽象的概念。如果追溯起來，箭頭符号... 2022-11-17
生活當幸福來敲門人生感悟
當幸福來敲門人生感悟?#影視雜談#如果你想看一部經典的電影，那麼《當幸福來敲門》肯定是最佳的一個選擇；，現在小編就來說說關于當幸福來敲門人生感悟?下面内容希望能幫助到你，我們來一起看看吧!當幸福來敲門人生感悟#影視雜談#如果你想看一部經典的... 2022-11-07
生活供應鍊管理的内涵是什麼
供應鍊協同管理的含義是什麼？優勢有哪些？由于市場需求逐漸向多樣化、特殊化的轉變，傳統的生産模式已不足以應對競争激烈的市場環境，面對這樣的挑戰，若想在市場中獲得強大的競争力，離不開供應鍊各環節的協同合作，那供應鍊協同管理優勢是什麼？供應鍊協同... 2022-11-14

tft每日頭條

> 生活

> css中flex 怎麼使用

css中flex 怎麼使用

相关生活资讯推荐

热门生活资讯推荐

网友关注