经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » Flex » 查看文章
濡備綍瑙e喅flex鏂囨湰婧㈠嚭闂灏忕粨_CSS鏁欑▼_CSS
来源:jb51  时间:2022/7/19 9:56:24  对本文有异议

鍓嶈█

涓€涓皬濮戝闂簡鎴戝叧浜巉lex鏂囨湰婧㈠嚭鐨勯棶棰橈紝浜嬪悗鎴戣寰楄繖涓棶棰樿繕鎸烘湁鎰忔€濈殑锛屾墍浠ョ畝鍗曠殑鐮旂┒涓嬪拰澶у鍒嗕韩鍒嗕韩銆?/p>

闂

鐢ㄤ竴涓畝鍖栫殑css鍜宧tml涓轰緥

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .left {
    width: 100px;
    height: 100%;
    background: red;
  }
  .right {
    flex: auto;
    height: 100%;
    background: blue;
    color: #fff;
  }
  .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

<div class="box">
  <div class="left">123</div>
  <div class="right">
    <p class="text">
      杩欐槸涓€娈靛緢闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱鏂囧瓧锛岃繖鏄竴娈靛緢闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱闀块暱鏂囧瓧
    </p>
  </div>
</div>
<div class="box" style="background: green">姝e父鐨刡ox</div>

涓婇潰鏄竴涓猣lex瀹瑰櫒锛屽寘鎷潃涓や釜瀹瑰櫒锛屽叾涓彸杈圭殑瀹瑰櫒涓垜浠笇鏈涚殑搴旇鏄甯稿睍绀猴紝涓旀枃鏈樉绀虹渷鐣ュ彿锛屼絾鎬绘槸浜嬩笌鎰胯繚銆傞〉闈㈠睍绀哄涓嬶紝宸﹁竟绾㈣壊鍖哄煙琚帇缂╋紝钃濊壊鐨勫尯鍩熸媺浼镐簡锛屽苟灏嗙埗瀹瑰櫒鎾戝紑銆?/p>

閭d箞锛屾垜浠濡備綍瑙e喅鎬庝箞杩欎釜闂鍛紵

瑙e喅鏂规硶

鏂规硶鏈変笁锛屽涓?/p>

  • 钃濊壊瀹瑰櫒璁剧疆 overflow: hidden
  • 钃濊壊瀹瑰櫒璁剧疆 width: 0
  • 钃濊壊瀹瑰櫒璁剧疆 min-width: 0

绗竴绉?overflow瓒呭嚭鎴柇姣旇緝濂界悊瑙c€傛垜浠湅鐪嬪墿涓嬬殑涓ょ銆?/p>

娉曚簩 width

绗簩绉嶏紝棣栧厛鐪嬩笅flex灞炴€?/p>

<!-- 缂╁啓 -->
flex: auto; 

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

<!--榛樿鍊间负-->
flex: 0 1 auto;

flex: auto鏄痜lex: 0 1 auto鐨勭缉鍐?/p>

鍏朵腑

  • flex-grow锛氳〃绀烘斁澶ф瘮渚?/li>
  • flex-shrink锛氳〃绀虹缉灏忔瘮渚?/li>
  • flex-basis锛氫綔鐢ㄤ簬瀛愬厓绱犵殑涓昏酱涓婄殑瀹藉害灞炴€э紝骞朵笖浼樺厛绾ф瘮榛樿鐨勫/楂樿楂樸€?杩欎釜灞炴€у喅瀹欳SS濡備綍缁欏彲浼哥缉椤瑰湪瀹瑰櫒涓垎閰嶅垵濮嬪ぇ灏?

涓婇潰浣滃鐨勫睘鎬у氨鏄痜lex-basis銆俧lex-basis鐨勫€兼湁 content | \<width\>

flex-basis: 浼氭绱㈤」鐩殑width 鎴?height 鍊间綔涓?flex-basis 鐨勫€笺€傚鏋?width 鎴?height 鍊间负 auto锛屽垯 flex-basis 璁剧疆涓?content锛屼篃灏辨槸鍩轰簬 flex 鐨勫厓绱犵殑鍐呭鑷姩璋冩暣澶у皬銆?/p>

娉ㄦ剰锛?flex-basis璁剧疆 0 鍜?0% 涓婃湁鎵€鍖哄埆, 濡傛灉flex-basis鐨勫€间负鐧惧垎鏁帮紝涓斿畠flex瀹瑰櫒鐨勫昂瀵告病鏈夎鏄惧紡璁剧疆锛屾鏃秄lex-basis鐨勫€间細琚В鏋愪负content, 鍊间細鏍规嵁flex瀛愰」鐨勫唴瀹癸紙鎸噁lex瀛愰」鐨勫瓙鍏冪礌灏哄锛夋潵璁$畻瀹為檯灏哄锛屽鏁版儏鍐典笅鏁堟灉涓?max-content 鍊间竴鑷达紝灏辨槸璇磃lex瀛愰」鐨勫瓙鍏冪礌鏈夊闀垮叾涓昏酱鍒濆鍊煎氨鏈夊闀裤€?/p>

杩欓噷钃濊壊瀹瑰櫒鐨刦lex-basis涓洪粯璁ゅ€?椤圭洰鎬诲搴﹀皬浜庡鍣ㄥ搴︼紝璁$畻濡備笅锛?/p>

椤圭洰鎬诲搴?00px + 0px = 100px

寰呭垎閰嶅搴?00px - 100px = 300px

鏀惧ぇ姣斾緥0 + 1 = 1 , 杩欐槸椤圭洰鐨刦lex-grow涔嬪拰

姣忎釜椤圭洰寰楀埌鑷韩鐨刧row/鎬荤殑grow涔嬪拰姣斾緥鐨勫墿浣欑┖闂淬€?/p>

绾㈣壊瀹瑰櫒寰楀埌0/1 * 300px = 0锛屾渶缁堝搴?00px + 0px = 100px

钃濊壊瀹瑰櫒寰楀埌 1/1 * 300px = 300px锛屾渶缁堝搴?00px

灏嗚摑鑹插鍣ㄧ殑瀹藉害璁句负0锛岄獙璇佷笅鎴戜滑鐨勭粨鏋滐紝缁撴灉濡備笅锛岃В鍐虫垚鍔熴€?/p>

娉曚笁 min-width

涓€鑸儏鍐典笅 min-width 灞炴€ч粯璁ゅ€兼槸 0 锛屼絾鏄?Flexbox 瀹瑰櫒涓殑 flex 椤圭殑 min-width 灞炴€ч粯璁ゅ€兼槸 auto 锛岃繖鏍疯兘涓?Flexbox 甯冨眬鎸囨槑鏇村悎鐞嗙殑榛樿琛ㄧ幇銆傚皢min-width璁剧疆鎴?锛寃idth鏈缃粯璁ゅ€间负auto銆傝繖涓椂鍊欎細浣跨敤shrink-to-fit绠楁硶鍘昏绠楀搴?鏂囩尞3涓鏄巉lexbox涓篃浼氫娇鐢ㄥ埌璇ョ畻娉?, 绠楁硶濡備笅锛?/p>

width = min(max(preferred minimum width, available width), preferred width)

鍏朵腑

  • 鏈€灏忓搴︼紙preferred minimum width锛変篃灏辨槸min-width
  • 鍙敤瀹藉害锛坅vailable width锛?锛岃繖涓搴︿负鍖呭惈鍧楀噺鍘籱argin銆乥order銆乸adding浠ュ強鎵€鏈夌浉鍏虫粴鍔ㄦ潯鐨勫搴︺€?/li>
  • 鍙戠敓鏄庣‘鐨勬崲琛屽涓嶅彂鐢熸崲琛岀殑鏃?棣栭€夊搴︼紙preferred width锛?鍗砪ontent-box鐨勫搴?/li>

閭d箞璁$畻濡備笅: (816鏄綋鏃舵祻瑙堝櫒鑾峰彇鐨勫搴?

min(max(0, 400px - 100px), 816px) = 300px

鎵€浠ワ紝璁剧疆鏈€灏忓搴︿篃鑳借В鍐虫垜浠殑闂銆?/p>

flex鍐嶇畻涓€棰?/h3>

html鐨勫唴瀹瑰涓嬶紝鎴戜滑闇€瑕佽绠楀乏鍙充袱涓鍣ㄧ殑瀹藉害銆?/p>

<style>
  .box {
    display: flex;
    height: 200px;
    margin-top: 20px;
    width: 400px;
    margin: 20px auto 0 auto;
  }
  .item-1 {
    background: red;
    width: 200px;
    flex-shrink: 2;
  }
  .item-2 {
    background: blue;
    width: 300px;
    flex-shrink: 3;
  }
</style>
<div class="box">
  <div class="item-1">璁剧疆200px锛屽疄闄?69.23</div>
  <div class="item-2">璁剧疆300px锛屽疄闄?30.77</div>
</div>

寮€濮嬭绠楋紝姝ゆ椂椤圭洰鎬诲搴﹁秴杩囩埗瀹瑰櫒鏃讹紝杩欎釜鏃跺€欓渶瑕佷娇鐢╢lex-shrink璁$畻

  • 鍏堣鍘昏绠楅」鐩殑铏氭嫙鎬诲搴otal = 鍚勯」鐩甪lex-basic * flex-strink 涔嬪拰锛岃繖閲屽乏鍙抽」鐩兘璁剧疆浜嗗搴︼紝鎵€浠lex-basis=width
  • 鍐嶈绠楀崟涓」鐩殑鍗犳瘮P = flex * flex-strink / Total
  • 鏈€鍚庤绠楅」鐩簲璇ュ噺鍘荤殑澶у皬 = 鐪熷疄瓒呭嚭閮ㄥ垎 * P

Total = 200 * 2 + 300 * 3 = 1300

P1 = 200 * (2 / VS)

P2 = 300 * (3 / VS)

鏈€缁堝緱鍑猴細

item-1鐨勫搴︿负锛?00 - (500 - 400) * P1 = 169.23px

item-2 鐨勫搴︿负锛?00 - (500 - 400) * P2 = 230.77px

鍙傝€冩枃鐚?/h3>

鍒版杩欑瘒鍏充簬濡備綍瑙e喅flex鏂囨湰婧㈠嚭闂灏忕粨鐨勬枃绔犲氨浠嬬粛鍒拌繖浜?鏇村鐩稿叧flex鏂囨湰婧㈠嚭鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒

 友情链接: NPS