?ㄤ互寰???澶у??扮?椤靛?灞?涓??缁?甯歌??ㄥ?版诞?ㄦ??瀹?浣???灞?涓??涓轰?瀹??拌?浜?????锛???浠???甯镐??ㄥ??SS涓?nbsp;display灞?? + position灞?? + float灞??ф?ュ???锛?浣?瀵逛???浜?甯?灞???甯镐??逛究锛?寰?寰??辫垂涓?蹇?瑕????堕?磋??杈句??版?宠???????锛?CSS3涓??扮?规??isplay: flex???虹?帮?浣挎??浠??借?????堕?村??浼???浠ｇ??锛?骞跺??板??绉?椤甸?㈢???蹇???甯?灞???Flex??lexible Box??缂╁??锛???涓?quot;寮规?у?灞?"锛?瀹???寮哄ぇ涔?澶??ㄤ负???舵ā????渚???澶х???垫椿?с????涓?display: flex?煎?澶у??颁富娴?娴?瑙??????浜?娴?瑙??ㄤ娇?ㄦ?堕??瑕???涓???缂?锛?姣?濡?Webkit???哥??娴?瑙????蹇?椤诲??涓?-webkit??缂???
?ㄤ娇??isplay: flex甯?灞??跺??绱?瀹瑰?ㄤ负??瀹?寮规?х??瀛??讹??????ㄧ?跺??绱?涓??缃??display锛?flex锛????跺??绱?涓?????????瀛???绱???灞???loat??clear??vertical-align??病????????锛???琛?????绱?瀹瑰?ㄥ脊?х??瀛?璁剧疆涓?isplay锛?inline-flex锛?寮规?х??瀛???涓ゆ?¤酱锛?姘村钩??涓昏酱锛?妯?酱锛??????寸??浜ゅ??杞达?绾佃酱锛???榛?璁ゆí杞翠负涓昏酱锛?榛?璁よ??乏???筹?绾佃酱涓鸿?杞达?榛?璁よ?????涓???
?ㄨ?缃??display: flex???跺??绱?涓?锛?甯稿父浼??ㄥ?扮?????冲脊?у?灞???灞??т富瑕??? flex-direction , flex-wrap , justify-content , align-items , align-content 锛?杩???涓???у?????涓昏酱???瑰???????︽?㈣???瀛???绱??ㄤ富杞翠???瀵归??瑰???瀛???绱??ㄤ氦??杞翠???瀵归??瑰???瀛???绱??ㄥ??硅酱绾夸???瀵归??瑰??ヨ?瀹?浜?瀛???绱??ㄧ?跺??绱?涓???寮规?э?浠????ヨ揪?版???冲??扮????????
?ㄥ?涔?浜??跺??绱?涓哄脊?х??瀛???瀛???绱????ユ????灞??ч?芥??锛?order锛?flex-grow锛?flex-shrink锛?flex-basis锛?align-self??order瑙?瀹?浜?瀛???绱??虹?扮??????寰??锛??艰?灏?锛?????瓒?????锛?榛?璁や负0锛?flex-grow瀹?涔?浜?瀛???绱????惧ぇ姣?渚?锛?榛?璁や负0锛?琛ㄧず?充娇?跺??绱?杩????╀?绌洪?翠?涓??惧ぇ璇ュ???绱???璁剧?跺??绱???瀹藉害涓?00px锛?涓?涓????绱?瀹藉害????负100px锛?濡???????瀛???绱???flex-grow???间负1锛???濡????跺??绱????╀?绌洪?达?瀛???绱?浼?绛?姣?渚??惧ぇ锛??冲?╀??烘?ョ??200/3??缁?涓?涓????绱?锛?濡??????涓????绱?flex-grow涓?锛?涓?涓?负2锛?绗??涓?负3锛???涓?涓????绱?????????帮?200*锛?1/6锛?锛?200*锛?2/6锛?锛?200*锛?3/6锛?锛?flex-shrink瀹?涔?浜?瀛???绱???缂╁?姣?渚?锛?榛?璁や负1锛?褰??跺??绱?绌洪?翠?瓒虫?讹?濡?????涓??＄????flex-shrink?煎??涓?锛???琛ㄦ??绛?姣?渚?缂╁?锛?濡???涓?锛???琛ㄧず涓?缂╁???
浣???锛??圭淮缃?缁?涓ユ??
濡?娌＄?规?娉ㄦ??锛???绔???涓烘?圭淮缃?缁?????,杞?浇璇锋敞???ヨ??ttps:/news/4322.html
