鍓嶅嚑澶╁湪鍐檉lex瀹瑰櫒瀹藉害琚唴瀹规媺浼哥殑闂鏃讹紝鐪嬪埌涓€绡囨枃绔爁lex:1鍒板簳鏄粈涔堟剰鎬濓紵纭疄锛屽緢澶氭椂鍊欏彧鏄煡閬揻lex:1鐨勪綔鐢紝骞朵笉鐭ラ亾瀹冨叿浣撲唬琛ㄤ粈涔堛€傚拰閭ｄ釜甯栧瓙涓€鏍凤紝鎴戞渶鍒濈悊瑙lex:1搴旇鏄痜lex:11auto鐨勭畝鍐欍€傚洜涓鸿缃甪lex:1鍚庯紝瀹瑰櫒灏卞彲浠ュ睍寮€浜嗐€傜敱浜巉lex鐨勯粯璁ゅ€兼槸01auto锛岀悊鎵€褰撶劧鍦拌涓烘槸杩欐牱鐨勩€傜湅瀹岃繖绡囨枃绔犲悗锛屾垜鍙戠幇浜嬪疄骞堕潪濡傛銆傜缉鍐欑殑flex:1鍏跺疄灏辨槸flex:110%锛岃繖閲宖lex-basis鐨勫€肩敱榛樿鍊煎彉鎴愪簡0%锛屼絾鏄枃绔犳病鏈夎В閲婁负浠€涔堜細杩欐牱銆傝瘹鐒讹紝杩欎笢瑗夸笉鍊煎緱鐮旂┒涓轰粈涔堬紝浣犲彧瑕佺煡閬撲簡瑙ｅ氨琛屼簡銆備笉杩囨槰澶╃炕鐨勬椂鍊欐濂界湅鍒拌繖涓€娈点€奀SS鏂颁笘鐣屻€嬶紒涓轰粈涔坒lex灞炴€х殑琛屼负鏂瑰紡濡傛涓嶅悓锛熸牴鎹瓹SS瑙勮寖锛岃繖鏍疯璁＄殑鐩殑鏄负浜嗚flex灞炴€х殑琛ㄧ幇鏇寸鍚堟垜浠棩甯哥殑寮€鍙戦渶姹傘€傚嵆褰撴垜浠娇鐢╢lex:1鏃讹紝姝ｅ父鎯呭喌鏄痜lex-basis涓?%锛屽嵆basesize涓?锛涘綋鎴戜滑浣跨敤flex:100px鏃讹紝姝ｅ父鎯呭喌鏄痜lex-grow涓?锛屽嵆Dimensions淇濇寔鍚戝寮规€с€俧lex灞炴€т粠瀹炵敤涓讳箟鐨勮搴︿紭鍖栦簡璁＄畻鍊笺€傛垜璁や负杩欐槸瀵笴SS瑙勮寖鐨勪竴绉嶅弸濂藉鐞嗭紝杩欑鍙嬪ソ鍦╢lex鐨勫叧閿瓧灞炴€х殑鍙栧€间笂鏇村姞鏄庢樉銆傗€斺€斻€奀SS鏂颁笘鐣屻€嬩功涓婃彁鍒帮紝寰堝皯鏈変汉鍦ㄤ娇鐢╢lex鐨勬椂鍊欒兘璁颁綇鍝釜鍊煎搴斿摢涓睘鎬с€俧lex鍗曞€肩缉鍐欒娉曠殑浣滅敤鏄娇flex灞炴€х殑浣滅敤璇箟鍖栧拰琛ㄩ潰鍖栥€備緥濡傦紝flex鐨勬寮忚娉曟槸锛歠lex:none|[<'flex-grow'><'flex-shrink'>?||楂樺害鏉ヨ缃昂瀵搞€傚畠鏄畬鍏ㄦ棤寮规€х殑锛氬畠鏃笉鏀剁缉涔熶笉鎷変几浠ラ€傚簲鏌旀€у鍣ㄣ€傜浉褰撲簬璁剧疆灞炴€т负flex:00auto銆傛垜浠敞鎰忎功涓己璋冪殑flex灞炴€х殑澶氬€艰娉曪細<'flex-grow'><'flex-shrink'>?||<'flex-basis'>(1)濡傛灉flex灞炴€у€煎彧鏈変竴涓紝鍏蜂綋瑙勫垯濡備笅锛氬鏋滄槸涓€涓€硷紝姣斿flex:1锛岄偅涔堣繖涓?灏辨槸flex-grow鐨勫€煎睘鎬э紝flex-shrink灞炴€у拰flex-basis灞炴€х殑鍊煎垎鍒负1鍜?%銆傛敞鎰忚繖閲岀殑flex-basis灞炴€ф槸0%锛屼笉鏄痑uto鐨勯粯璁ゅ€笺€傚鏋滄槸闀垮害鍊硷紝姣斿flex:100px锛岄偅涔堣繖涓?00px鏄剧劧灏辨槸flex-basis灞炴€х殑鍊硷紝鍥犱负涓変釜缂╁啓鐨凜SS灞炴€т腑鍙湁flex-basis鐨勫睘鎬у€兼敮鎸侀暱搴﹀€笺€傛鏃秄lex-grow灞炴€у拰flex-shrink灞炴€х殑鍊奸兘鏄?銆傛敞鎰忚繖閲岀殑flex-grow灞炴€х殑鍊间负1鑰屼笉鏄粯璁ゅ€?銆?2)濡傛灉flex灞炴€у€兼湁2涓€硷紝绗竴涓€煎繀椤绘槸flex-grow灞炴€у€硷紙鍥犱负闂彿琛ㄧず0杩樻槸1锛焒lex-shrink鍚庛€怌SS灞炴€у€煎畾涔夎娉曞彲浠ョ湅杩欓噷銆戯級锛岀浜屼釜鍊煎搴旀牴鎹€肩殑绫诲瀷涓嶅悓鐨凜SS灞炴€э紝鍏蜂綋瑙勫垯濡備笅銆傚鏋滅浜屼釜鍊兼槸涓€涓€硷紝姣斿flex:12锛岄偅涔堣繖涓?灏辨槸flex-shrink灞炴€х殑鍊硷紝flex-basis灞炴€х殑璁＄畻鍊间负0%锛屼笉鏄痑uto鐨勯粯璁ゅ€笺€傚鏋滅浜屼釜鍊兼槸涓€涓暱搴﹀€硷紝姣斿flex:1100px锛岄偅涔堣繖涓?00px灏辨槸flex-basis灞炴€у€笺€?3)濡傛灉flex灞炴€ф湁3涓€硷紝闀垮害鍊间负flex-basis灞炴€у€硷紝鍏朵綑涓や釜鍊煎垎鍒负flex-grow鍜宖lex-shrink灞炴€у€笺€備笅闈袱琛孋SS璇硶鏄悎娉曠殑锛屽惈涔夌浉鍚岋細/*涓嬮潰涓よCSS璇彞鐨勫惈涔夌浉鍚?/flex:1250%;寮规€э細50%12锛涘搴旂殑璁＄畻鍊兼槸鐩稿綋浜巉lex鐨勭缉鍐欙細initialflex:01autoflex:0flex:010%flex:noneflex:00autoflex:1flex:110%flex:autoflex:11auto鍏蜂綋鏁堟灉鍙互鏌ョ湅鍦ㄥ紶澶ф垜鍐欑殑杩欎釜渚嬪瓙涓煍梖lex鍏抽敭瀛楀睘鎬у€肩殑鍩烘湰鏁堟灉灞曠ず绀轰緥椤甸潰绠€鍗曟潵璇达細濡傛灉浣犳兂淇濇寔鍏冪礌骞抽摵骞舵牴鎹搴︽崲琛岋紝鍙互浣跨敤flex:initial锛屾瘮濡俛listofsmalllabelsandsmalliconswithvariablewidths;濡傛灉浣犳兂璁╁厓绱犱笉闅忓鍣ㄧ殑瀹藉害缂╂斁锛屽彲浠ヤ娇鐢ㄣ€€flex:none鏉ュ疄鐜帮紝姣斿鍥哄畾瀹藉害鐨勪晶杈规爮鍦ㄤ笂涓€绡囨枃绔犱腑锛涘鏋滀綘鎯宠鍏冪礌鎸夋瘮渚嬫斁澶у拰缂╁皬锛屼綘鍙互浣跨敤flex:1鏉ュ疄鐜帮紱濡傛灉鎯宠鍏冪礌鍗犳嵁瀹瑰櫒鐨勫墿浣欑┖闂存垨鑰呮牴鎹唴瀹圭殑瀹藉害缂╁皬锛屽彲浠ヤ娇鐢╢lex:auto鏉ュ疄鐜帮紱flex:0鏆傛椂涓嶈€冭檻搴旂敤鍦烘櫙銆傜粨璇煄堥棶棰樹竴锛氫笉鍚岀殑flex-basis鍊间細濡備綍褰卞搷鍏冪礌锛熸瘮杈冧竴锛歠lex:0鍜宖lex:initial鐨勫尯鍒畠浠笉浼氭墿瀹癸紝鍗充笉浼氬崰鐢ㄥ墿浣欑┖闂淬€俧lex:0鐨勫厓绱犲搴︿负鏈€灏忓唴瀹瑰搴︼紝缂╂斁鏃舵寜鐓ф渶灏忓唴瀹瑰搴﹀崰鐢ㄧ┖闂淬€俧lex:initial鐨勫厓绱犲搴︽槸鍐呭鐨勬渶澶у搴︼紝缂╂斁鏃舵牴鎹嚜韬唴瀹圭殑瀹藉害缂╁皬鑷韩鐨勫搴︺€傛瘮杈冧簩锛歠lex:1鍜宖lex:auto鐨勫尯鍒粬浠兘浼氭墿瀹瑰拰缂╁锛屼篃灏辨槸浼氬崰鐢ㄥ墿浣欑殑绌洪棿銆俧lex:1鐨勫厓绱犲搴﹀彲浠ョ湅浣滄槸灏嗗墿浣欑殑绌洪棿骞冲垎锛屾垨鑰呮寜姣斾緥缂╁皬鍏冪礌銆俧lex:auto鐨勫厓绱犲搴︽牴鎹嚜韬唴瀹圭殑瀹藉害鍒嗛厤鍓╀綑绌洪棿锛屾垨鑰呭噺灏忚嚜韬殑瀹藉害銆傚鏋滅湅鐨勬湁鐐圭硦娑傦紝鍙互鐪嬩笅闈㈢殑鍏蜂綋渚嬪瓙锛欳odePenDemo涓嶅ソ鐞嗚В锛屽鏋滃悓鏃惰缃簡flex-basis灞炴€х殑鍊煎拰width灞炴€х殑鍊硷紝搴旇鏄摢涓睘鎬у簲鐢ㄣ€傝繖涓垜闇€瑕佸啀鎸栦釜鍧戞潵瑙ｉ噴涓€涓嬶紝鍥犱负鍐呭杩樺緢澶氾紝鎴栬€呭彲浠ョ洿鎺ュ弬鑰冦€奀SS鏂颁笘鐣屻€嬬6绔?.2.12鑺傘€傛枃浠秄lex:1鍒板簳鏄粈涔堟剰鎬濓紵銆奀SS鏂颁笘鐣屻€?寮犳柊鏃璮lex-CSS(CascadingStyleSheet)|MDNflex-grow-CSS锛堢骇鑱旀牱寮忚〃锛墊1CSS灞炴€у€煎畾涔夎娉?CSS锛堝眰鍙犳牱寮忚〃锛墊MDN
