1. 瀹瑰櫒鐨勫竷灞€鏂瑰悜鍜屾帓鍒楁柟鍚戰煃?flex-direction鎺у埗涓昏酱鏄摢涓€鏍瑰悓鏃舵帶鍒朵富杞寸殑鏂瑰悜(鎺掑垪鏂瑰紡)row锛氫粠宸﹀線鍙崇殑x杞磖ow-reverse锛氫粠鍙冲線宸︾殑x杞碿olumn锛氫粠涓婂線涓嬬殑y杞碿olumn-reverse锛氫粠涓嬪線涓婄殑y杞?. 瀵岃绌洪棿鐨勭鐞嗮煃呭彧鍐冲畾瀵岃绌洪棿鐨勪綅缃紝涓嶄細缁欓」鐩尯鍒嗛厤绌洪棿馃崊涓昏酱 :justify-contentflex-start锛氬湪涓昏酱鐨勬鏂瑰悜flex-end: 鍦ㄤ富杞寸殑鍙嶆柟鍚慶enter锛?鍦ㄤ袱杈箂pace-between锛氬湪椤圭洰涔嬮棿space-around锛氬湪椤圭洰涓よ竟馃崊渚ц酱 : align-items 绠＄悊鍗曡鐨勫瘜瑁曠┖闂?鍨傜洿浜庝富杞寸殑杞磃lex-start锛氬湪渚ц酱鐨勬鏂瑰悜flex-end锛?鍦ㄤ晶杞寸殑鍙嶆柟鍚慶enter锛氬湪涓よ竟baseline: 鍩虹嚎瀵归綈stretch: 绛夐珮甯冨眬锛堥」鐩病鏈夐珮搴︼級space-aroundspace-evently3. 寮规€х┖闂寸殑绠＄悊flex-grow锛氬脊鎬у洜瀛愶紙榛樿鍊间负0锛?. flex瀹瑰櫒锛圕SS3鏂板锛夝煃?flex-wrap 鎺у埗渚ц酱鐨勬柟鍚?鍙€夊€硷細wrap-reverse銆亀rap銆? nowrapnowrap 涓嶆崲琛寃rap 渚ц酱鏂瑰悜鐢变笂鑰屼笅锛坒lex-shrink澶辨晥锛墂rap-reverse 渚ц酱鏂瑰悜鐢变笅鑰屼笂锛坒lex-shrink澶辨晥锛夝煃?align-content 澶氳澶氬垪鏃?瀵岃绌洪棿鐨勭鐞嗭紝浼氭妸鎵€鏈夎銆佸垪鐪嬫垚涓€涓暣浣擆煃呬晶杞村瘜瑁曠┖闂寸殑绠＄悊鎬荤粨锛氬崟琛屽崟鍒梐lign-itemsalign-self锛堜紭鍏堢骇楂橈級澶氳澶氬垪align-content(澶氳鏃朵互瀹冧负鍩哄噯)馃崊flex-flow :flex-direction鍜宖lex-wrap鐨勭畝鍐欏睘鎬э紝鏈川涓婃帶鍒朵簡涓昏酱鍜屼晶杞村垎鍒槸鍝竴鏍癸紝浠ュ強浠栦滑鐨勬柟鍚戙€傪煃協lex-grow:灏嗕富杞翠笂鐨勫瘜瑁曠┖闂存寜姣斾緥鍒嗛厤鍒伴」鐩笂!灞炰簬瀹氫箟寮规€х洅瀛?flex-item)鐨勫脊鎬у洜瀛?榛樿鍊间负0馃崊浠ｇ爜绀轰緥锛?lt;!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; /*flex-direction: row;*/ /*flex-wrap: wrap-reverse;*/ flex-flow:row wrap-reverse; justify-content: flex-start; align-items: flex-start; align-content: flex-end; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; flex-grow: 1; } #wrap > .item:nth-child(1){ align-self: center; flex-grow: 4; order:3; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body></html>5.flex甯冨眬鈥斺€旈」鐩柊澧瀘rder:鎺у埗椤圭洰鐨勬帓鍒楅『搴忥紝order瓒婂ぇ椤圭洰瓒婂悗align-self锛氶」鐩嚜韬瘜瑁曠┖闂寸殑绠＄悊flex-shrink锛氭敹缂╁洜瀛愶紙榛樿鍊间负1锛夛紱璧蜂綔鐢ㄥ墠鎻愶細flex-wrap涓簄owrap锛涢」鐩殑鎬诲搴﹁秴鍑哄鍣ㄦ椂锛岃繘琛屼几缂ゝlex-basis:锛堥粯璁ゅ€间负auto锛変几缂╄鍒欒绠楃殑鍩哄噯鍊硷紙榛樿鎷夸富杞磜idth鎴杊eight鐨勫€硷級浼哥缉瑙勫垯馃崊flex-grow鎷変几鍥犲瓙瑙勫垯 浠ヤ笂闈emo涓轰緥鍙敤绌洪棿 = (瀹瑰櫒澶у皬 - 鎵€鏈夌浉閭婚」鐩甪lex-basis鐨勬€诲拰) 400 - 50*5 =150鍙墿灞曠┖闂?= (鍙敤绌洪棿/鎵€鏈夌浉閭婚」鐩甪lex-grow鐨勬€诲拰) //涓€涓猣lex-grow鎵€瑕佸崰鎹殑绌洪棿 150/(1*4+4)=18.75姣忛」浼哥缉澶у皬 = (浼哥缉鍩哄噯鍊糵lex-basis + (鍙墿灞曠┖闂?* flex-grow鍊?) 50+18.75*1=68.75 50+18.75*4=125 馃崊flex-shrink 鏀剁缉鍥犲瓙瑙勫垯鈶?璁＄畻鏀剁缉鍥犲瓙涓庡熀鍑嗗€间箻鐨勬€诲拰var a = 姣忎竴椤筬lex-shrink*flex-basis涔嬪拰a = 1*200+1*4*50=400鈶?璁＄畻鏀剁缉鍥犳暟鏀剁缉鍥犳暟=锛堥」鐩殑鏀剁缉鍥犲瓙*椤圭洰鍩哄噯鍊硷級/绗竴姝ヨ绠楁€诲拰var b = (flex-shrink*flex-basis)/ab = (1*200)/400=1/2 b'=(1*50)/400=1/8鈶㈢Щ闄ょ┖闂寸殑璁＄畻绉婚櫎绌洪棿= 椤圭洰鏀剁缉鍥犳暟 x 璐熸孩鍑虹殑绌洪棿var c = b * 婧㈠嚭鐨勭┖闂碿 = 1/2*|(100-400)| = 150 c' =1/8*300 =37.5鍓╀笅鐨勭┖闂粹啋 椤圭洰1锛?00-150=50 鍏朵綑椤圭洰锛?0-37.5=12.5娉細鍐呴儴鏄釜閫掑綊寰幆锛屽鏋滃叾涓煇涓」鐩唴瀹瑰澶氾紝姣斿鍐呭锛?2.5锛?瀹冧細鎶婂搴﹀噺鍘?2.5锛屽墿涓嬬殑鍊兼寜鐓ц鍒欒鍏朵綑鍥涗釜鍐嶆潵鎵挎媴锛岄噸鏂板垎閰嶇┖闂翠唬鐮佺ず渚嬶細<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 100px; height: 400px; border: 1px solid; display:flex; } .item{ width: 50px; height: 50px; background: pink; text-align: center; flex-shrink: 1; } .item:nth-child(1){ width: 200px; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body></html>6.flex鐨勭畝鍐欏睘鎬lex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)绛夊垎甯冨眬鍒嗘瀽flex-basis涓?锛屽垯鍙敤绌洪棿灏辩瓑浜庡鍣ㄧ殑澶у皬锛沠lex-grow涓?锛屽皢涓昏酱涓婂瘜瑁曠┖闂村钩鍧囧垎閰嶅埌姣忎釜椤圭洰涓婏紱fle-shrink鐨勫€煎奖鍝嶄笉澶lex 鍙互璁剧疆寮规€у厓绱犳墍鏈夌殑涓変釜鏍峰紡锛?flex 澧為暱 缂╁噺 鍩虹 initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" 寮规€у厓绱犳病鏈夊脊鎬? <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display: flex; } #wrap > .item{ height: 50px; background: pink; text-align: center; line-height: 50px; /*flex-shrink: 1; flex-grow: 1; flex-basis: 0;*/ flex: 1; } </style> </head> <body> <div id="wrap"> <div class="item">11</div> <div class="item">222</div> <div class="item">3333</div> <div class="item">44444</div> <div class="item">555555</div> </div> </body></html> 浠ヤ笂鏄釜浜哄叧浜巉lex甯冨眬鐨勫涔犳€荤粨锛屾杩庡澶氫氦娴佸拰瀛︿範锛佸闇€杞浇锛岃鑱旂郴浣滆€厏
