1. 绗竴娆￠亣鍒拌繖涓棶棰樼殑鍦烘櫙

鍏堢湅鏁堟灉鍥撅紝澶у鍙互鐪嬩竴涓嬩笅闈㈢殑鏍峰紡锛屽緢鏄庢樉宸﹁竟鍜屽彸杈圭殑鐩掑瓙鎴戞槸缁欑殑瀹氬锛屼絾鏄鎸ゅ帇浜?br />杩欎釜鏄垜鍦ㄩ」鐩腑閬囧埌鐨勪竴涓猙ug锛屼娇鐢ㄧ殑 flex 甯冨眬锛岀敱浜庢垜鍔ㄦ€佺殑淇敼缁胯壊鐩掑瓙鐨勬樉绀轰笌闅愯棌锛屽鑷翠袱杈圭洅瀛愮殑鎸ゅ帇

<style>
.container {
  width: 1400px;
  display: flex;
  height: 100vh;
}
.box1 {
  background-color: red;
  width: 300px;
}
.box2 {
  background-color: yellow;
  flex: 1;
}
.box3 {
  background-color: green;
  width: 400px;
}
</style>
<div class="container">
  <div class="box1"></div>
  <div class="box2">
    <div>
      ...el-table
    </div>
  </div>
  <div class="box3 none"></div>
</div>

2. 绗簩绉嶆儏鍐?/h2>

寰堟槑鏄撅紝绾㈣壊鐨勭洅瀛愭病鏈?00px

<style>
  .container {
    display: flex;
    width: 600px;
    height: 600px;
  }
  .box1 {
    background-color: red;
    width: 300px;
  }
  .box2 {
    background-color: yellow;
    flex: 1;
  }
</style>
<div class="container">
  <div class="box1"></div>
  <div class="box2">Loremipsumdolorsitametconsecteturadipisicingelit.Quasi,eveniet?</div>
</div>

3. 闂鍘熷洜

• 棣栧厛浜嗚В涓€涓?nbsp;flex: n; 鐨勫畾涔夛紝褰撲娇鐢ㄥ崟鍊艰娉曠殑鏃跺€欙紝鍙互鐞嗚В涓哄氨鏄缃簡 flex: n 1 0; 瀵瑰簲鐨?nbsp;flex-grow: n; flex-shrink: 1; flex-basis: 0;锛岃繖閲屾垜浠彧鎺㈢┒ flex-grow: n;
• flex-grow锛氳瀹氫簡椤瑰湪 flex 瀹瑰櫒涓垎閰嶅墿浣欑┖闂寸殑鐩稿姣斾緥锛岃繖閲岀殑鍓╀綑绌洪棿鎸囩殑鏄櫎鍐呭涔嬪鐨勭┖闂?/li>
• 鑰屼笂闈袱绉嶆儏鍐碉細
  • 鎯呭喌涓€锛氱敱浜?nbsp;flex-grow 鍙兘浣垮綋鍓嶅厓绱犵敓鏁堬紝鑰屽瓙鍏冪礌鐨勫搴︿篃灏辨槸褰撳墠鍏冪礌鐨勫唴瀹癸紝鍦?el-table 涓涓€娆¤鍙栧搴﹀悗锛屼細缁欏瓙鍏冪礌璁剧疆鍥哄畾瀹藉害锛岃繘鑰屽鑷存病鏈夊墿浣欑┖闂达紝涔熷氨鏄綋鍐呭绌洪棿澶т簬鍓╀綑绌洪棿鏃?nbsp;flex-grow: n; 灏卞凡缁忓け鏁堜簡
  • 鎯呭喌浜岋細鍐呭鐨勯暱鍗曡瘝娌℃湁绌烘牸锛屽彲鑳藉湪瑙ｆ瀽鐨勬椂鍊欏綋鍋氫竴涓瓧绗︼紝鎵€浠ュ唴瀹圭殑闀垮害灏辨槸鏁翠釜瀛楃鐨勫疄闄呴暱搴︼紝鍚屾牱涔熷鑷翠簡 flex-grow: n; 鐨勫け鏁?/li>

4. 瑙ｅ喅鏂规

4.1 鏂规涓€

• 鍐呭鐩掕缃?nbsp;width: 0;锛屼晶杈规爮姝ｅ父锛屼絾鏄唴瀹圭洅鐨勫唴瀹逛細婧㈠嚭锛岃繖绉嶆儏鍐电湅鎬庝箞澶勭悊鍐呭閮ㄥ垎
• 鍥犱负渚ц竟鏍忕殑瀹藉害涓€鑸兘鏄浐瀹氱殑锛岃繖绉嶅鐞嗘柟妗堣櫧鐒朵細鏈変竴瀹氱殑鍙栬垗锛屼絾鏄細姣斿師鍏堝ソ涓€浜?/li>

4.2 鏂规浜?/h3>

• 缁欏唴瀹圭洅璁剧疆 overflow-y: auto; 锛岃繖鏍蜂晶杈规爮姝ｅ父锛屽唴瀹圭洅浼氬嚭鐜版í鍚戞粴鍔ㄦ潯

鍒版杩欑瘒鍏充簬flex甯冨眬瀛愬厓绱犲搴﹁秴鍑虹埗鍏冪礌闂鍙婅В鍐虫柟妗堢殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧flex甯冨眬瀛愬厓绱犲搴﹁秴鍑哄唴瀹硅鎼滅储鑴氭湰涔嬪浠ュ墠鐨勬枃绔犳垨缁х画娴忚涓嬮潰鐨勭浉鍏虫枃绔狅紝甯屾湜澶у浠ュ悗澶氬鏀寔鑴氭湰涔嬪锛?nbsp;