如何使用 javascript/jquery 更改 flexbox 元素的宽度答案

【问题标题】：How to change width in flexbox element using javascript/jquery如何使用 javascript/jquery 更改 flexbox 元素的宽度
【发布时间】：2018-06-11 01:49:59
【问题描述】：

如何使用 javascript 更改 flex 元素的宽度？我有这个代码（小提琴https://jsfiddle.net/sdgz8nxa/24/）

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .container {
    border: 2px solid red;
    height: 100vh;
    display: flex;
  }
  .bl1 {
    border: 2px solid lime;
    height 100%;
    flex: 1;
  }
  .bl2 {
    border: 2px solid blue;
    height 100%;
    flex: 1;
  }
  </style>
</head>
<body>
  <div class="container">
  <div class="bl1"></div>
  <div class="bl2"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script>

  $( '.bl1' ).append( 'before ' + $( ".bl1" ).css( "width" ) );
  //here can't change 
  $( ".bl1" ).css( "width", "300px" );

  $( '.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );  
  </script>
</div>
</body>
</html>

并且输出宽度始终相同这一行不起作用 $( ".bl1" ).css( "width", "300px" );

如何在 flexbox 块中使用 javascript 更改宽度？

【问题讨论】：

标签： javascript jquery flexbox

【解决方案1】：

你可以这样定义

$(".bl1").css( "flex", "0 1 300px" );

当您为 .bl1 和 .bl2 flex: 1; 写信时，这意味着

flex-grow: 1;  // should be equal to each other
flex-shrink: 1;
flex-basis: 0%;

现在你可以说

$(".bl1").css( "flex", "0 1 300px" );

意思是

flex-grow: 0;
flex-shrink: 1;
flex-basis: 300px;

而 flex-basis 是指盒子的宽度，对于旧版浏览器，您可以使用 width:300px 进行回退

  $('.bl1' ).append( 'before ' + $(".bl1" ).css("width") );
  //here can't change 
$(".bl1").css( "flex", "0 1 300px" );

  $('.bl1' ).append( '<br>after ' + $( ".bl1" ).css( "width" ) );

.container {
    border: 2px solid red;
    height: 100vh;
    display: flex;
  }
  .bl1 {
    border: 2px solid lime;
    height 100%;
    flex: 1;
  }
  .bl2 {
    border: 2px solid blue;
    height 100%;
    flex: 1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bl1"></div>
  <div class="bl2"></div>

【讨论】：

【解决方案2】：

您可以使用 'flex' 属性来更改其大小，而不是使用宽度。你也可以使用小数。

【讨论】：