如何使用javascript/jquery更改flexbox元素中的宽度
如何使用javascript/jquery更改flexbox元素中的宽度
提问于 2018-06-11 01:34:42
如何使用javascript更改flex元素的宽度？我有这个代码(fiddle 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更改宽度？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-11 01:48:17
你可以这样定义
$(".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- make表示框的宽度，您可以使用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>
Stack Overflow用户
发布于 2018-06-11 01:40:41
你可以使用'flex‘属性来改变它的大小，而不是使用宽度。您也可以使用小数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50786335
复制相关文章
相似问题