经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » Flex » 查看文章
璇﹁Вflex:1浠€涔堟剰鎬漘CSS鏁欑▼_CSS
来源:jb51  时间:2022/7/25 15:27:16  对本文有异议

绠€鍗曠殑鏉ヨ涓€涓嬪湪鍒汉闂綘杩欎釜闂鐨勬椂鍊欐€庝箞鏉ュ洖绛斿畠

鍓嶇鏂颁汉锛屽鏈夐敊璇眰澶т浆鎸囧嚭~姹傛暀馃挐

鎯呮櫙澶嶇幇

澶т浆鎻愰棶锛?ldquo;浣犵煡閬揻lex: 1;鐨勬洿娣卞眰娆$殑鍐呭鍚楋紵”

鎴戠殑鍥炵瓟锛?/p>

  • flex:1瀹為檯浠h〃鐨勬槸涓変釜灞炴€х殑绠€鍐?/li>
  • flex-grow鏄敤鏉ュ澶х洅瀛愮殑锛屾瘮濡傦紝褰撶埗鐩掑瓙鐨勫搴﹀ぇ浜庡瓙鐩掑瓙鐨勫搴︼紝鐖剁洅瀛愮殑鍓╀綑绌洪棿鍙互鍒╃敤flex-grow鏉ヨ缃瓙鐩掑瓙澧炲ぇ鐨勫崰姣?/li>
  • flex-shrink鐢ㄦ潵璁剧疆瀛愮洅瀛愯秴杩囩埗鐩掑瓙鐨勫搴﹀悗锛岃秴鍑洪儴鍒嗚繘琛岀缉灏忕殑鍙栧€兼瘮渚?/li>
  • flex-basis鏄敤鏉ヨ缃洅瀛愮殑鍩哄噯瀹藉害锛屽苟涓攂asis鍜寃idth鍚屾椂瀛樺湪basis浼氭妸width骞叉帀

鎵€浠lex锛?锛涚殑閫昏緫灏辨槸鐢╢lex-basis鎶妛idth骞叉帀锛岀劧鍚庡啀鐢╢lex-grow鍜宖lex-shrink澧炲ぇ鐨勫澶х缉灏忕殑缂╁皬锛岃揪鎴愭渶缁堢殑鏁堟灉銆?/p>

flex-grow:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-grow: 1;
    }
 
    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }
 
 
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

鐖剁洅瀛愬墿浣欑┖闂寸殑200

  • 绗竴涓洅瀛愭墿澶?/5锛?00+40 = 140
  • 绗簩涓洅瀛愭墿澶?/5锛?00+120=220
  • 绗笁涓洅瀛愭墿澶?/5锛?00+40= 140

flex-shrink:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 200px;
    }
 
    .box div:nth-child(1) {
      flex-shrink: 1;
    }
 
    .box div:nth-child(2) {
      flex-shrink: 2;
    }
 
    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

鐖剁洅瀛愮殑瀹藉害涓?00锛屽瓙鐩掑瓙鐨勫搴︿负600锛岃秴鍑?00锛岃秴鍑虹殑100锛屽浣曡繘琛屾瘮渚嬬缉鏀?/p>

绗竴涓洅瀛愶細1/4 * 100 = 25 鏈€缁堢涓€涓洅瀛?00-25=175
绗簩涓洅瀛愶細2/4 * 100 = 50 鏈€缁堢浜屼釜鐩掑瓙200-50 = 150
绗笁涓洅瀛愶細1/4 * 100 = 25 鏈€缁堢涓€涓洅瀛?00-25=175

flex-basis:0%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-basis: 50px;
    }
 
    .box div:nth-child(2) {
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

杩欐牱width鐨勫搴﹀氨宸茬粡琚玣lex-basis:0%骞叉帀浜?/p>

鍒版杩欑瘒鍏充簬璇﹁Вflex:1浠€涔堟剰鎬濈殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧flex:1璇﹁В鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒

 友情链接: NPS