1.澶氬垪甯冨眬锛圡ulti-columnLayout锛塎DN-CSSMulti-columnLayoutCanIUse-CSS3Multi-columnLayoutCSS鎻愪緵浜嗗澶氬垪甯冨眬鐨勬敮鎸併€傛敮鎸佽缃竷灞€涓殑鍒楁暟(column-count)銆佸唴瀹瑰湪鍒椾箣闂寸殑娴佸姩鏂瑰紡銆佸垪涔嬮棿鐨勯棿璺?column-gap)浠ュ強鍒楀垎闅旂鐨勬牱寮?column-rule)銆備緥濡傚彲浠ュ疄鐜板涓嬬€戝竷鏁堟灉锛欳odependemomainstyle:.masonry{width:1440px;杈硅窛锛?0px鑷姩锛涘垪鏁帮細4锛涘垪闂磋窛锛?0px锛?item{瀹藉害锛?00%锛涢棷鍏ワ細閬垮厤锛涘簳閮ㄨ竟璺濓細30px锛沬mg{瀹藉害锛?00%锛泒}}2.涔﹀啓妯″紡锛圵ritingModes锛塎DN-CSSWritingModesCanIUse-CSSwriting-modepropertyWritingModes瀹氫箟浜嗗悇绉嶅浗闄呭寲鐨勪功鍐欐ā寮忥紝姣斿浠庡乏鍒板彸锛堟媺涓佽銆佸嵃鍦拌锛夈€佷粠鍙冲埌宸︼紙甯屼集鏉ヨ銆侀樋鎷変集璇級銆佸弻鍚戯紙娣峰悎浠庡乏鍒板彸鍜屼粠鍙冲埌宸︾殑璇█锛夊拰鍨傜洿锛堜腑鏂囷級銆備互涓嬫槸涓夌涔﹀啓鏂瑰紡鐨勫睍绀猴細;}鎴栬€咃紝瀹冨彲浠ョ敤鏉ュ疄鐜伴粦瀹㈠笣鍥界殑浠ｇ爜闆細Codepen-Matrixcoderain3銆俛spect-ratio灞炴€DN-aspect-ratio鎴戝彲浠ヤ娇鐢?CSS灞炴€?aspect-ratioCSS鐨刟spect-ratio灞炴€х敤浜庤缃厓绱犵殑棣栭€夊楂樻瘮锛屽彲浠ヨ嚜鍔ㄨ绠楀楂樼瓑涓€浜涘竷灞€鍔熻兘锛岀渷鍘讳簡鍚屾椂璁＄畻瀹介珮鐨勫伐浣溿€備緥濡傝棰戠綉绔欏彲浠ヨ缃棰戞挱鏀剧獥鍙ｇ殑姣斾緥涓?6/9锛欳odependemokeystyle:.video-box{width:70vw;鑳屾櫙鑹诧細#000锛沘spect-ratio:16/9;}4.gap灞炴€DN-gapCanIUse-gappropertyforFlexboxCSS鐨刧ap灞炴€х敤浜庤缃甪lex鍜実rid甯冨眬涓鍜屽垪涔嬮棿鐨勯棿璺濓紝鏄痳ow-鐨勭畝绉伴棿闅欏拰鏌遍棿闅欍€備互鍓嶅湪浣跨敤flex甯冨眬鏃讹紝寰€寰€浼氫娇鐢╩argin鍜宲adding鏉ユ帶鍒秄lexitem涔嬮棿鐨勯棿闅斻€備娇鐢╣ap鏇存柟渚裤€備緥濡傦細
