有时候，使用Grid布局很简单
时间：2023-03-28 19:18:56
HTML
浠嬬粛涔嬪墠鍐欒繃涓ょ瘒鏂囩珷锛屽垎鍒瑙ｄ簡Flex甯冨眬鍜実rid甯冨眬銆傜劧鍚庡緢澶氫汉鍙嶉銆傜綉鏍煎竷灞€娌℃湁鍦烘櫙锛屽氨瀛lex甯冨眬鍚с€備粖澶╃殑鏂囩珷閫氳繃涓€涓緥瀛愭潵璇存槑缃戞牸甯冨眬鐨勪紭鐐广€傚苟涓嶆槸璇磃lexlayout鍋氫笉鍒般€傝繖鎰忓懗鐫€鍦ㄦ煇浜涘満鏅笅锛屼娇鐢‵lex甯冨眬閫昏緫浼氫笉娓呮櫚锛屼唬鐮佷細澶嶆潅寰堝銆傛墜鏈烘闈㈢殑widgets浠婂ぉ瑕佷妇鐨勪緥瀛愭潵鑷簬鎵嬫満妗岄潰銆傚湪鐜板湪鐨勬墜鏈烘闈笂锛屽彲浠ヨ嚜瀹氫箟涓€浜汚pp鍥炬爣锛屼篃鍙互娣诲姞寰堝widget銆備互鎴戠殑iPhone涓轰緥銆備竴涓闈紝浼氭湁4鍒楀浘鏍囷紝鍙互鍦ㄨ繖浜涙闈笂浠绘剰娣诲姞widgets銆傚皬閮ㄤ欢鍙兘澶勪簬鍚勭鎯呭喌锛屼緥濡備竴琛屽洓鍒楁垨涓よ涓ゅ垪銆傚鏋滄垜浠敤鍓嶇椤甸潰鏉ュ疄鐜拌繖涓晥鏋滐紝搴旇鎬庝箞鍋氬憿锛烣lex瀹炵幇浣犲彲浠ュ厛鎯虫兂濡備綍鐢‵lex鏉ュ疄鐜拌繖涓竷灞€銆傚鏋滀娇鐢‵lex甯冨眬鏂瑰紡鏉ュ疄鐜拌繖涓渶姹傘€傛垜浠細鍙戠幇浣跨敤Flex甯冨眬鏄緢楹荤儲鐨勩€傛垜浠渶瑕佺敤js鎻愬墠璁＄畻褰撳墠琛屼腑鏄惁鏈夊崟琛屽鍒楃殑缁勪欢锛屾垨鑰呭琛屼竴鍒楃殑缁勪欢銆傛嬁鍒板竷灞€缁撴瀯鍚庯紝鍏堝仛绗竴灞傜殑div锛屽啀鍋氱浜屽眰鐨刣iv銆傝繖閲岀殑閫昏緫澶夯鐑︿簡锛屽氨涓嶅啓浜嗐€傛湁鍏磋叮鐨勫彲浠ュ皾璇曡嚜宸卞啓銆侴rid瀹炵幇棣栧厛浼氭湁涓€涓埗鑺傜偣銆傚畠鏄竴涓寘鍚垪鍜岃鐨勭綉鏍煎鍣ㄣ€備负浜嗛伩鍏嶇暀涓嬬┖鐧斤紝鎴戜滑灏嗚嚜鍔ㄥ竷灞€绠楁硶璁剧疆涓哄瘑闆嗐€?divclass="grid-box"id="box">
杩欐槸CSS锛?grid-box{border:1pxsolid#999;瀹藉害锛?00px锛涢珮搴︼細400px锛涙樉绀猴細缃戞牸锛涜竟璺濓細20px锛涚綉鏍兼ā鏉垮垪锛氶噸澶嶏紙4銆?fr锛夛紱缃戞牸妯℃澘琛岋細閲嶅锛?銆?fr锛夛紱闂撮殭锛?px锛涘～鍏咃細6px锛沢rid-auto-flow:dense;}.grid-box>div{background-color:bisque;杈圭晫鍗婂緞锛?px锛沚order:1pxsolid#ccc;}鍋囪鏄闈㈠浘鏍囨垨鑰厀idgets锛屽彲浠ラ€夋嫨1x1,1x2,2x1,2x2鍥涚鏁堟灉銆傛墍浠ユ垜浠彲浠ュ厛璁剧疆涓変釜澶у皬鐨勫瓙鑺傜偣绌洪棿锛屽洜涓洪粯璁ゆ槸1x1锛屾墍浠?x1涓嶉渶瑕佸崟鐙缃€傛湁浜嗚繖浜涚被锛屾垜浠湪鍒涘缓瀛愯妭鐐圭殑鏃跺€欙紝鍙渶瑕佺粰瀹冩坊鍔犵浉搴旂殑绫诲氨鍙互瀹炵幇鐩稿簲鐨勬晥鏋滀簡銆?grid-box-item-1{grid-column-end:span2;/*1x2*/}.grid-box-item-2{grid-row-end:span2;/*2x1*/}.grid-box-item-3{/*2x2*/grid-column-end:span2;grid-row-end:span2;}鍥犱负瑕佹帶鍒堕殢鏈轰綅缃紝缃戞牸甯冨眬涓嶅儚Flex甯冨眬锛屽彲浠ユ寚瀹氬瓙鑺傜偣鐨勯『搴忋€傛墍浠ヨ繖涓瓙鑺傜偣闇€瑕侀€氳繃JS杩藉姞鍒板鍣ㄤ腑銆傚嚱鏁皉andomItem(){璁﹕tyleArr=[0,0,0,0,1,1,2,3];璁﹊temsEl='';for(leti=0;i
${i} `;}}boxEl.innerHTML=itemsEl;}randomItem();鏁堟灉濡傚浘锛氭渶鍚庢垜浠styles鏁扮粍鍋氫竴涓殢鏈恒€傚嚱鏁皉andomItem(){璁﹕tyleArr=[0,0,0,0,1,1,2,3];styleArr=styleArr.sort(()=>{returnMath.random()>0.5?1:-1;});//...}褰撴垜浠瘡娆￠噸鏂拌皟鐢╮andomItem鏂规硶鏃讹紝閮戒細瀵瑰瓙鑺傜偣杩涜闅忔満鎺掑垪銆傛晥鏋滃鍥撅細鎬荤粨杩樻槸涓婇潰鐨勪緥瀛愩€傚鏋滃竷灞€缁撴瀯鏄浐瀹氱殑锛岄偅涔堜娇鐢‵lex甯冨眬鍏跺疄骞朵笉澶嶆潅锛屼絾鏄竴鏃︽湁鍙樺寲锛孎lex灏变細鍙樺緱澶嶆潅銆傚彲瑙佷娇鐢‵lex鍙互蹇€熻В鍐冲ぇ閮ㄥ垎鍦烘櫙銆傝繖鏄箣鍓嶅緢澶氫汉璇勮鐨勩€傚鏋滄壘涓嶅埌浣跨敤Grid甯冨眬鐨勫満鏅紝鍒欐棤闇€瀛︿範Grid甯冨眬銆備絾鏄竴鏃﹂亣鍒颁竴浜涚壒娈婃儏鍐碉紝涓嶇煡閬揋rid甯冨眬锛屽氨鍙兘鐢‵lex浜嗭紝閭ｄ唬鐮佸張鑷張闀裤€傚埌姝ょ粨鏉燂紝鏈枃鍒版缁撴潫锛屽笇鏈涙湰鏂囧浣犳湁鎵€甯姪:-)鏈€杩戞柊寮€閫氫簡涓€涓叕浼楀彿锛氬啓浠ｇ爜鐨勬旦鍝ワ紝璇峰叧娉煒勩€傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
