CSS3 涓殑 display: flex 鏄竴绉嶅己澶х殑甯冨眬妯″紡锛岃绉颁负“寮规€х洅甯冨眬”鎴?ldquo;Flexbox”銆傚畠鍏佽鎴戜滑閫氳繃涓€濂楃畝娲佺殑瑙勫垯锛岃交鏉惧湴瀵圭綉椤靛厓绱犺繘琛屽榻愩€佹帓鍒楀拰鍒嗗竷锛屼笉璁鸿繖浜涘厓绱犵殑澶у皬銆佹帓鍒楁柟鍚戝浣曘€傚畠涓昏瑙ｅ喅浜嗕紶缁熷竷灞€鏂规硶涓亣鍒扮殑涓€浜涢棶棰橈紝濡傚厓绱犲榻愩€侀棿璺濆垎閰嶄互鍙婅嚜閫傚簲甯冨眬绛夈€備笅闈㈡槸瀵?display: flex 鐨勪竴浜涘叧閿蹇靛拰浣跨敤鏂规硶鐨勮缁嗕粙缁嶃€?/p>

1. 鍩烘湰姒傚康锛?/h2>

display: flex 浼氭妸瀹瑰櫒鐨勫瓙鍏冪礌锛堝嵆鐩存帴瀛愬厓绱狅級鍙樹负寮规€х洅瀛愰」锛坒lex items锛夛紝骞朵笖鏍规嵁瀹氫箟鐨勮鍒欐潵瀵硅繖浜涘瓙鍏冪礌杩涜鎺掑垪鍜屽竷灞€銆傚脊鎬у竷灞€涓昏鐢变袱涓柟闈㈢粍鎴愶細

• 瀹瑰櫒锛團lex Container锛?/strong>锛氭槸浣跨敤 display: flex 鎴?display: inline-flex 鐨勫厓绱狅紝鍖呭惈浜嗛渶瑕佹帓鍒楃殑瀛愬厓绱犮€?/li>
• 椤癸紙Flex Items锛?/strong>锛氭槸瀹瑰櫒鐨勭洿鎺ュ瓙鍏冪礌锛屾墍鏈夌殑鎺掑垪銆佸榻愯鍒欓兘鏄綔鐢ㄥ湪杩欎簺椤逛笂鐨勩€?/li>

2. 甯歌鐨?Flexbox 灞炴€э細

2.1 瀹瑰櫒涓婄殑灞炴€э細

• display: flex锛氬皢鍏冪礌璁句负寮规€х洅瀹瑰櫒锛岄粯璁ゆ帓鍒楁柟寮忎负姘村钩鏂瑰悜锛堜粠宸﹀埌鍙筹級銆?/li>
• flex-direction锛氬畾涔変富杞达紙items 鎺掑垪鐨勬柟鍚戯級锛屽彲閫夊€硷細
  • row锛氭按骞虫柟鍚戯紙榛樿锛夈€?/li>
  • row-reverse锛氭按骞虫柟鍚戯紝鍙嶅悜鎺掑垪銆?/li>
  • column锛氬瀭鐩存柟鍚戙€?/li>
  • column-reverse锛氬瀭鐩存柟鍚戯紝鍙嶅悜鎺掑垪銆?/li>

.container {
    display: flex;
    flex-direction: row;
}

• flex-wrap锛氭帶鍒堕」鐩槸鍚︽崲琛屻€傞粯璁ゆ儏鍐典笅锛屾墍鏈夐」浼氬皾璇曞湪涓€琛屽唴鏄剧ず锛岃缃负 wrap 鍙互浣垮畠浠湪绌洪棿涓嶈冻鏃舵崲琛屻€?
  • nowrap锛堥粯璁わ級锛氫笉鎹㈣銆?/li>
  • wrap锛氭崲琛屻€?/li>
  • wrap-reverse锛氬弽鍚戞崲琛屻€?/li>

.container {
    display: flex;
    flex-wrap: wrap;
}

• justify-content锛氬畾涔変富杞存柟鍚戜笂鐨勫榻愭柟寮忥紝鎺у埗鍚勪釜瀛愰」涔嬮棿鐨勯棿璺濆垎甯冦€?
  • flex-start锛堥粯璁わ級锛氶潬宸﹀榻愶紙鎴栭《閮ㄥ榻愶紝濡傛灉涓昏酱鏄瀭鐩寸殑锛夈€?/li>
  • flex-end锛氶潬鍙冲榻愶紙鎴栧簳閮ㄥ榻愶級銆?/li>
  • center锛氬眳涓榻愩€?/li>
  • space-between锛氶」涔嬮棿鏈夌浉绛夌殑闂磋窛锛岄灏鹃」绱ц创瀹瑰櫒杈圭紭銆?/li>
  • space-around锛氶」涔嬮棿鏈夌浉绛夌殑闂磋窛锛岄灏鹃」鏈変竴鍗婄殑闂磋窛銆?/li>
  • space-evenly锛氶」涔嬮棿鐨勯棿璺濈浉绛夛紝鍖呮嫭棣栧熬椤广€?/li>

.container {
    display: flex;
    justify-content: center;
}

• align-items锛氭帶鍒朵氦鍙夎酱锛堝瀭鐩存柟鍚戯級涓婇」鐩殑瀵归綈鏂瑰紡銆傛灞炴€х敤浜庡瀹瑰櫒鍐呯殑鎵€鏈夐」鐩繘琛屽瀭鐩村榻愩€?
  • flex-start锛氶《閮ㄥ榻愩€?/li>
  • flex-end锛氬簳閮ㄥ榻愩€?/li>
  • center锛氬眳涓榻愩€?/li>
  • baseline锛氬熀绾垮榻愩€?/li>
  • stretch锛堥粯璁わ級锛氭媺浼镐娇鎵€鏈夐」濉弧瀹瑰櫒鐨勯珮搴︺€?/li>

.container {
    display: flex;
    align-items: center;
}

• align-content锛氱被浼间簬 justify-content锛屼絾瀹冩槸鎺у埗澶氳鍐呭鐨勫榻愭柟寮忥紝鍙湁鍦?flex-wrap: wrap 鏃舵墠鏈夋剰涔夈€?
  • flex-start锛氶《閮ㄥ榻愩€?/li>
  • flex-end锛氬簳閮ㄥ榻愩€?/li>
  • center锛氬眳涓榻愩€?/li>
  • space-between锛氶」涔嬮棿鏈夌浉绛夌殑闂磋窛锛岄灏鹃」绱ц创瀹瑰櫒杈圭紭銆?/li>
  • space-around锛氶」涔嬮棿鏈夌浉绛夌殑闂磋窛锛岄灏鹃」鏈変竴鍗婄殑闂磋窛銆?/li>
  • stretch锛堥粯璁わ級锛氭媺浼稿～鍏呭鍣ㄣ€?/li>

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

2.2 椤圭洰涓婄殑灞炴€э細

flex-grow锛氬畾涔夐」濡備綍鍦ㄤ富杞存柟鍚戜笂鎵╁睍锛屼互濉厖瀹瑰櫒鐨勫墿浣欑┖闂淬€傞粯璁ゅ€间负 0锛屽嵆涓嶆墿灞曘€?/p>

.item {
    flex-grow: 1;  /* 鍗犳嵁鎵€鏈夊墿浣欑┖闂?*/
}

flex-shrink锛氬畾涔夐」濡備綍鍦ㄤ富杞存柟鍚戜笂鏀剁缉锛岄粯璁や负 1锛屽嵆鍦ㄧ┖闂翠笉瓒虫椂鏀剁缉銆?/p>

.item {
    flex-shrink: 1;  /* 鏀剁缉 */
}

flex-basis锛氬畾涔夐」鐨勫垵濮嬪ぇ灏忥紝榛樿鍊间负 auto锛屽嵆鏍规嵁鍐呭鐨勫ぇ灏忓喅瀹氥€傚鏋滄寚瀹氫簡澶у皬锛岄」浼氬熀浜庢澶у皬杩涜鍒嗛厤銆?/p>

.item {
    flex-basis: 200px;  /* 鍒濆澶у皬涓?200px */
}

flex锛氱畝鍐欏睘鎬э紝瀹冩槸 flex-grow銆?code>flex-shrink 鍜?flex-basis 鐨勭粍鍚堛€傞粯璁ゅ€间负 0 1 auto銆?/p>

.item {
    flex: 1;  /* 绛夊悓浜?flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

align-self锛氬厑璁稿崟涓」鐩鐩?align-items 璁剧疆杩涜鑷畾涔夊榻愩€傚彲浠ョ敤鏉ュ湪浜ゅ弶杞翠笂鍗曠嫭鎺у埗鏌愪釜瀛愰」鐨勫榻愭柟寮忋€?/p>

.item {
    align-self: center;  /* 椤圭洰鍦ㄤ氦鍙夎酱涓婂眳涓?*/
}

3. Flexbox 甯冨眬妯″瀷鐨勪紭鐐癸細

• 鍝嶅簲寮忚璁?/strong>锛欶lexbox 浣垮緱鍏冪礌鍙互鍦ㄥ鍣ㄥ唴鐏垫椿鍦拌皟鏁村ぇ灏忓拰浣嶇疆锛岄€傚簲涓嶅悓鐨勫睆骞曞昂瀵稿拰璁惧銆?/li>
• 瀵归綈鍜岄棿璺?/strong>锛氶€氳繃 justify-content銆?code>align-items 鍜?align-self 绛夊睘鎬э紝鍙互闈炲父鏂逛究鍦拌繘琛屽榻愩€佸垎甯冨拰闂磋窛绠＄悊銆?/li>
• 绠€鍖栧竷灞€锛氬彲浠ョ渷鍘诲緢澶氫紶缁熷竷灞€涓殑瀹氫綅锛?code>position锛夈€佹诞鍔紙float锛変互鍙婃竻闄ゆ诞鍔紙clear锛夌瓑澶嶆潅鎿嶄綔锛屼唬鐮佺畝娲佹竻鏅般€?/li>
• 鐏垫椿鎬?/strong>锛氭棤璁烘槸姘村钩鎺掑垪杩樻槸鍨傜洿鎺掑垪锛孎lexbox 閮借兘杞绘澗瀹炵幇锛屽苟涓旀敮鎸佸姩鎬佽皟鏁淬€?/li>

4. 搴旂敤鍦烘櫙锛?/h2>

• 瀵艰埅鏉?/strong>锛氫娇鐢?display: flex 鍙互杞绘澗瀹炵幇姘村钩鎴栧瀭鐩存帓鍒楃殑瀵艰埅鏍忋€?/li>
• 灞呬腑瀵归綈锛欶lexbox 鍙互鏂逛究鍦板疄鐜版按骞冲拰鍨傜洿鐨勫畬鍏ㄥ眳涓榻愩€?/li>
• 鑷€傚簲甯冨眬锛氬浜庡搷搴斿紡璁捐锛孎lexbox 鍏佽鍏冪礌鍦ㄤ笉鍚屽昂瀵哥殑灞忓箷涓嬫牴鎹彲鐢ㄧ┖闂磋嚜鍔ㄨ皟鏁村竷灞€銆?/li>
• 澶氳甯冨眬锛氬湪闇€瑕佸鐞嗗涓厓绱犺鏃讹紝浣跨敤 flex-wrap 鍙互璁╁厓绱犺嚜鍔ㄦ崲琛岋紝淇濊瘉甯冨眬鐏垫椿鎬с€?/li>

鍒版杩欑瘒鍏充簬css3 display:flex 寮规€х洅妯″瀷 鐨勭悊瑙ｇ殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧css3 display:flex 寮规€х洅鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒