flex甯冨眬宸茬粡寰堟櫘閬嶄簡锛屽墠绔簲璇ヤ篃鐢ㄨ繃銆傜劧鑰岋紝Flex甯冨眬涓殑灞炴€у拰缁嗚妭澶锛屽緢瀹规槗蹇樿鏃堕棿銆備粖澶╅噸缁勪簡Flex銆傚洖椤句竴涓嬶紝鏂逛究浠ュ悗鐨勫紑鍙戝拰鏌ョ湅銆傚湪鏂囩珷鐨勬渶鍚庯紝鎴戣浜嗗浣曡浣忚繖浜涘睘鎬с€傛蹇甸鍏堬紝鎴戜滑闇€瑕佷簡瑙ｄ富杞村拰浜ゅ弶杞寸殑姒傚康銆備娇鐢ㄥ脊鎬у竷灞€鐨勭埗鍏冪礌绉颁负瀹瑰櫒锛坒lexcontainer锛夛紝瀹冪殑鎵€鏈夊瓙鍏冪礌锛堝寘鎷枃鏈€佷吉鍏冪礌锛夐兘鏄鍣ㄧ殑寮规€ч」銆傝繖閲岀殑涓昏酱鍜屾í杞存槸瀹瑰櫒鐨勪袱涓酱銆傚鍥撅細涓昏酱鍜屾í杞寸殑鏂瑰悜浼氬彈鍒伴〉闈功鍐欐柟寮忕殑褰卞搷銆備笂鍥炬槸浠庡乏鍒板彸銆佷粠涓婂埌涓嬮槄璇荤殑涓昏酱鍜屼氦鍙夎酱銆備笅闈㈢殑渚嬪瓙涔熷皢鍦ㄨ繖绉嶅啓浣滄ā寮忎笅杩涜瑙ｉ噴銆傛寜鐓ф渶甯歌鐨勪緥瀛愶紝鎴戜滑瑕佽浣忎富杞存槸琛岋紝鏂瑰悜鏄粠宸﹀埌鍙炽€傛í杞存槸鍒楋紝鏂瑰悜鏄粠涓婂埌涓嬨€傚彟澶栵紝鐢变簬涔﹀啓鏂瑰紡浼氭敼鍙樿捣姝綅缃紝鎵€浠ュ湪浣跨敤Flex甯冨眬鏃讹紝灞炴€у€间笉鍐嶆湁left銆乼op绛夎〃绀烘柟鍚戠殑鍙橀噺銆傚苟涓旀墍鏈夋洿鏀逛负寮€濮嬪拰杩欎簺鍙橀噺銆傚鍣ㄥ拰椤圭洰鐨勫睘鎬ф垜鏁寸悊浜嗕竴涓嬪鍣ㄥ拰椤圭洰鐨勫睘鎬с€侳lex瀹瑰櫒鐨勫睘鎬у睘鎬у悕鎻忚堪灞炴€у€糵lex-direction鍐冲畾浜嗕富杞磋鐨勬柟鍚戯紙榛樿鍊硷級锛氫富杞存按骞筹紝璧风偣鍦ㄥ乏绔€俽ow-reverse锛氫富杞存按骞筹紝璧风偣鍦ㄥ彸绔€俢olumn锛氫富杞村瀭鐩达紝璧风偣涓轰笂杈圭紭銆俢olumn-reverse锛氫富杞村瀭鐩达紝璧风偣鍦ㄥ簳閮ㄣ€俧lex-wrap椤圭洰鏄惁鎺掑湪涓€琛宯owrap锛堥粯璁わ級锛氫笉鎹㈣銆倃rap锛氭崲琛岀锛岀涓€琛屽湪涓婇潰銆倃rap-reverse锛氭崲琛岋紝绗竴琛屽湪涓嬮潰銆俧lex-flowflex-direction鐨勭畝鍐欙紝flex-wrap\justify-content椤圭洰鍦ㄤ富杞翠笂鐨勫榻愭柟寮忋€俧lex-start锛堥粯璁わ級锛氬乏瀵归綈flex-end锛氬彸瀵归綈center锛氬眳涓璼pace-between锛氫袱绔榻愶紝椤圭洰涔嬮棿鐨勯棿璺濈浉绛夈€俿pace-around锛氭瘡涓」鐩袱杈圭殑闂磋窛鐩哥瓑銆傚洜姝わ紝椤圭洰涔嬮棿鐨勯棿璺濇槸椤圭洰涓庤竟妗嗕箣闂寸殑闂磋窛鐨勪袱鍊嶃€俿pace-evenly锛氭瘡涓」鐩湪涓や晶鍜岃竟缂樼瓑闂磋窛銆俛lign-items椤圭洰濡備綍鍦ㄦí杞翠笂瀵归綈銆俧lex-start锛氭í杞磋捣鐐瑰榻愩€俧lex-end锛氭í杞存湯绔榻愩€俢enter锛氭í杞寸殑涓偣瀵归綈銆俠aseline锛氶」鐩腑绗竴琛屾枃鏈殑鍩虹嚎瀵归綈鏂瑰紡銆俿tretch锛堥粯璁わ級锛氬鏋渋tem娌℃湁璁剧疆楂樺害鎴栬€呰缃负auto锛屽畠浼氬崰鎹暣涓鍣ㄧ殑楂樺害銆俛lign-content澶氳酱瀵归綈銆俧lex-start锛氬榻愭í杞寸殑璧风偣銆俧lex-end锛氫笌浜ゅ弶杞寸殑鏈瀵归綈銆俢enter锛氫笌妯酱鐨勪腑鐐瑰榻愩€俿pace-between锛氫笌妯酱涓ょ瀵归綈锛岃酱涓庤酱涔嬮棿鐨勯棿闅斿潎鍖€鍒嗗竷銆俿pace-around锛氭瘡涓酱涓よ竟鐨勯棿璺濈浉绛夈€傚洜姝わ紝杞翠箣闂寸殑璺濈鏄酱涓庢鏋朵箣闂寸殑璺濈鐨勪袱鍊嶃€俿tretch锛堥粯璁わ級锛氳酱濉厖鏁翠釜浜ゅ弶杞淬€傚脊鎬ч」鐩殑灞炴€у悕绉版寚瀹氬睘鎬у€奸『搴忛」鐩殑鎺掑簭椤哄簭銆傚€艰秺灏忔帓鍒楄秺楂橈紝鍒嗛厤鏃堕粯璁?[integer]flex-growitem鏀惧ぇ姣斾緥锛岄粯璁?[number]flex-shrinkitem缂╁皬姣斾緥锛岄粯璁?[number]flex-basisexcessspace涔嬪墠锛宨tem[integer]flexflex-grow,flex-shrink鍜宖lex-basisshorthand\align-self鍗曚釜item鍗犵敤鐨勪富杞寸┖闂翠細瑕嗙洊鐖跺鍣ㄧ殑align-items灞炴€у拰align-items鐖惰妭鐐圭殑property鍙栧€肩浉鍚岋紝涓句緥璇存槑Flex瀹瑰櫒鐨刾ropertyflex-directionflex-direction鍐冲畾浜嗕富杞寸殑鏂瑰悜銆俽ow锛堥粯璁わ級锛氫富杞存槸姘村钩鐨勶紝璧风偣鍦ㄥ乏绔€俽ow-reverse锛氫富杞存按骞筹紝璧风偣鍦ㄥ彸绔€俢olumn锛氫富杞村瀭鐩达紝璧风偣涓轰笂杈圭紭銆俢olumn-reverse锛氫富杞村瀭鐩达紝璧风偣鍦ㄥ簳閮ㄣ€俧lex-wrapflex-wrap椤圭洰鏄惁閫傚悎涓€琛屻€俷owrap锛堥粯璁わ級锛氫笉鎹㈣銆倃rap锛氭崲琛岀锛岀涓€琛屽湪涓婇潰銆倃rap-reverse锛氭崲琛岋紝绗竴琛屽湪涓嬮潰銆俲ustify-contentjustify-content椤瑰湪涓昏酱涓婄殑瀵归綈鏂瑰紡銆俧lex-start锛堥粯璁わ級锛氬乏瀵归綈flex-end锛氬彸瀵归綈center锛氬眳涓璼pace-between锛氫袱绔榻愶紝椤圭洰涔嬮棿鐨勯棿璺濈浉绛夈€俿pace-around锛氭瘡涓」鐩袱杈圭殑闂磋窛鐩哥瓑銆傚洜姝わ紝椤圭洰涔嬮棿鐨勯棿璺濇槸椤圭洰涓庤竟妗嗕箣闂寸殑闂磋窛鐨勪袱鍊嶃€俿pace-evenly锛氭瘡涓」鐩湪涓や晶鍜岃竟缂樼瓑闂磋窛銆俛lign-itemsalign-items椤圭洰濡備綍鍦ㄦí杞翠笂瀵归綈銆俧lex-start锛氭í杞磋捣鐐瑰榻愩€俧lex-end锛氭í杞存湯绔榻愩€俢enter锛氭í杞寸殑涓偣瀵归綈銆俠aseline锛氶」鐩腑绗竴琛屾枃鏈殑鍩虹嚎瀵归綈鏂瑰紡銆俿tretch锛堥粯璁わ級锛氬鏋渋tem娌℃湁璁剧疆楂樺害鎴栬€呰缃负auto锛屽畠浼氬崰鎹暣涓鍣ㄧ殑楂樺害銆俛lign-contentalign-content瀹氫箟澶氫釜杞寸殑瀵归綈鏂瑰紡銆備竴涓酱涓嶈捣浣滅敤銆傛墍浠ュ畠蹇呴』璁剧疆flex-wrap涓簄on-nowrap骞朵笖鎹㈣绗︿技涔庣敓鏁堛€俧lex-start锛氬榻愭í杞寸殑璧风偣銆俧lex-end锛氫笌浜ゅ弶杞寸殑鏈瀵归綈銆俢enter锛氫笌妯酱鐨勪腑鐐瑰榻愩€俿pace-between锛氫笌妯酱涓ょ瀵归綈锛岃酱涓庤酱涔嬮棿鐨勯棿闅斿潎鍖€鍒嗗竷銆俿pace-around锛氭瘡涓酱涓よ竟鐨勯棿璺濈浉绛夈€傚洜姝わ紝杞翠箣闂寸殑璺濈鏄酱涓庢鏋朵箣闂寸殑璺濈鐨勪袱鍊嶃€俿pace-evenly锛氭瘡涓」鐩湪涓や晶鍜岃竟缂樼瓑闂磋窛銆俿tretch锛堥粯璁わ級锛氳酱濉厖鏁翠釜浜ゅ弶杞淬€傚脊鎬ч」鐩殑灞炴€ч『搴忛」鐩殑鎺掑簭椤哄簭銆傚€艰秺灏忥紝鎺掑垪瓒婇珮銆傞粯璁ゆ槸flex-growitem鍦?鏃剁殑鏀惧ぇ鍊嶆暟锛岄粯璁ゆ槸0銆?琛ㄧず涓嶇缉鏀撅紝濡傚浘涓殑渚嬪瓙銆傚鍣ㄥ搴︿负400锛屾寚瀹歩tem瀹藉害涓?0銆俫row鍒嗗埆璁剧疆涓?,2,6銆傞偅涔坕tem鐨勬€诲搴︽槸180锛屾瘮瀹瑰櫒灏忎簡400銆備负浜嗗～鍏?00鐨勫搴︼紝瀛愰」闇€瑕佹斁澶э紝鏀惧ぇ姣斾緥涓?銆?銆?銆傚嵆绗簩涓瓙椤瑰拰绗笁涓瓙椤归渶瑕佹牴鎹?:3鐨勬瘮渚嬶紝绗竴涓瓙椤规病鏈夋斁澶с€傚鍣ㄧ┖闂磋繕鍓?20涓€傛寜鐓?:3鍒嗗竷锛屼篃灏辨槸璇寸浜屼釜椤圭洰鑺傜偣闇€瑕佸鍔?5锛岀涓変釜瀛愰」鐩妭鐐归渶瑕佸鍔?65锛屾渶鍚庝笁涓瓙椤圭洰鐨勫搴﹀垎鍒槸60銆?15,225.flex-shrinkitem鐨勭缉灏忔瘮渚嬶紝榛樿涓?锛?琛ㄧず涓嶇缉鏀撅紝濡傚浘绀轰緥銆傚鍣ㄥ搴︿负300锛屾寚瀹歩tem瀹藉害涓?20銆俿hrink鍒嗗埆璁剧疆涓?銆?銆?銆傞偅涔坕tem鐨勬€诲搴︽槸360锛屾瘮瀹瑰櫒澶т簡300銆備负浜嗗～鍏?00鐨勫搴︼紝瀛愰」闇€瑕佺缉灏忥紝鏀惧ぇ姣斾緥涓?銆?銆?銆傚嵆绗簩涓瓙椤瑰拰绗笁涓瓙椤归渶瑕佺缉灏忎竴涓?:3鐨勬瘮渚嬶紝鑰岀涓€涓瓙椤逛笉鏄€傚瓙椤圭┖闂寸殑瀹藉害涓?0浠ヤ笂銆傛寜鐓?:3鍒嗛厤锛屽嵆绗簩涓」鐩妭鐐归渶瑕佸噺灏?5涓紝绗笁涓瓙椤圭洰鑺傜偣闇€瑕佸噺灏?5涓€傛渶鍚庝笁涓瓙椤圭殑瀹藉害鍒嗗埆涓?20銆?05銆?5銆俧lex-basis涓€涓」鍦ㄥ垎閰嶅浣欑┖闂翠箣鍓嶅湪涓昏酱涓婂崰鎹殑绌洪棿閲忋€傚鏋渇lex-basis:auto锛岄偅涔堣椤圭洰灏嗚璁剧疆涓哄搴︾殑瀹藉害锛屾垨鑰呭唴瀹圭殑瀹藉害銆傚惁鍒欎互flex-basis鎸囧畾鐨勫搴︿负鍑嗐€備互鍥句腑鐨勪緥瀛愪负渚嬶紝瀹瑰櫒鐨勫搴︿负400锛屼笁涓瓙椤圭殑瀹藉害鍒嗗埆涓?60280360銆傚彲浠ョ畻鍑轰笁涓瓙椤圭殑瀹藉害涔嬪拰涓?00锛屾瘮瀹瑰櫒鐨勫搴﹀浜?00銆傚洜涓篺lex-shrink榛樿鏄?銆傚洜姝わ紝鏈夊繀瑕佸皢涓変釜鍚姩鍣ㄦ寜姣斾緥缂╁皬銆備篃灏辨槸璇达紝涓変釜鍒嗛」瑕佸噺鍗娿€傛渶缁堥」鐩搴︿负80140180銆俛lign-self鍗曚釜椤圭洰瑕嗙洊鐖跺鍣ㄧ殑align-items灞炴€с€傛渶鍚嶧lex鐨勫睘鎬ц繕鏈夊緢澶氾紝鏈€鍚庢€荤粨涓€涓嬪唴瀛樼殑鏂规硶銆俧lex瀹瑰櫒鐨勫睘鎬ч兘鏄敤鏉ヨВ鍐冲瓙椤圭殑鏂瑰悜銆佹崲琛屻€佸榻愮瓑闂鐨勩€傞鍏堥」鐩細鏈変竴涓柟鍚戯紝鎵€浠ュ氨鏈変簡flex-direction鏉ヨВ鍐冲瓙椤圭殑鏂瑰悜锛屾瘡琛屾瘡鍒楁湁涓や釜鏂瑰悜銆備竴涓猣lex瀹瑰櫒閮戒細鏈変竴涓富杞达紝鑰屼富杞村彲鑳戒細鏈夋崲琛岋紝鎵€浠ョ敱flex-wrap鎺у埗銆傛湁涓夌鎯呭喌锛氭病鏈夋崲琛屻€佹崲琛屻€佹崲琛屼絾鎹㈣椤哄簭棰犲€掋€傚湪涓昏酱涓婏紝鏈変竴涓瓙椤圭洰鐨勫榻愭柟寮忥紝瀹冧笌justify-content瀵归綈銆傛湁鍓嶄腑鍚?绉嶆儏鍐碉紝鍔犱笂娌块€旂殑涓や釜闂撮殧銆傚悓鐞嗭紝濡傛灉浜ゅ弶杞存槸澶氳锛屼篃闇€瑕佹帶鍒跺琛岀殑琛屽榻愶紝鐢盿lign-content鎺у埗銆傜被浼糺ustify-content锛?渚嬨€傛渶鍚庯紝椤圭洰杩橀渶瑕佸湪涓€琛屼腑瀵归綈銆備娇鐢╝lign-items杩涜瀵归綈锛岄櫎浜嗗墠涓悗涓夌锛屽姞涓婃枃瀛楀熀绾垮榻愶紝澧炲姞楂樺害鍒版渶澶ч珮搴﹀啀瀵归綈銆俛lign-items鎺у埗鐨勬槸鍗曚釜item锛屾墍浠ュ崟涓猧tem鍙互鐙珛鎸囧畾瀵归綈鏂瑰紡銆傝繖鍙仛瀵归綈鑷垜銆俛lign-self闇€瑕佸啓鍏ュ崟椤硅妭鐐广€侳lex椤圭洰鐨勫睘鎬цВ鍐充簡Flex椤圭洰涓」鐩殑缂╂斁鍜屾帓搴忛棶棰樸€傞閫夐渶瑕佹斁澶у拰flex-grow鏉ユ帶鍒躲€傜劧鍚庨渶瑕佹敹缂╋紝flex-shrink鏉ユ帶鍒躲€傛渶鍚庢槸瀹藉害绠＄悊銆備簨瀹炰笂锛宖lex椤圭洰鐨勫搴︽槸涓嶇敓鏁堢殑銆傚洜涓篺lex-basis:auto锛寃idth鍙互浠ontent涓哄搴︾敓鏁堛€傚榻愯嚜鎴戙€傚湪瀹瑰櫒涓湅鍒帮紝浣犲彲浠ユ寚瀹氫竴琛屼腑鍗曚釜椤圭洰鐨勫榻愭柟寮忥紝閭ｄ箞鍗曚釜椤圭洰闇€瑕佽兘澶熻鐩栧鍣ㄦ寚瀹氱殑瀵归綈鏂瑰紡銆傚湪杩欓噷浣跨敤align-self鏉ュ仛銆傚埌姝ょ粨鏉燂紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:-)鏈€杩戝張鍑烘柊浜嗗叕浼楀彿锛氬啓浠ｇ爜鐨勮豹锛屾眰鍏虫敞馃槃銆傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
