我在一个网站的响应式设计中使用flexbox在我的html中重新排序了一些元素,这些元素工作正常,但元素则不会正确调整大小.
在断点处,我已经将一类flex应用于home-promosdiv并重新排序元素.这工作正常.
当我尝试将div的大小调整为百分比宽度时,就会出现问题.它们只会调整到某个点,例如50%,然后不会变大.
Flexbox比我更好的人能告诉我这是什么问题吗？
.home-promos {
display: flex;
}
.home-promo-center {
order: 1;
}
.home-promo-left {
order: 2;
}
.home-promo-right {
order: 3;
}<div class="home-promos">
<div class="home-promo-left">
<div class="promo-left-content">
*content*
</div>
</div>
<div class="home-promo-center">
<div class="promo-center-content">
*content*
</div>
</div>
<div class="home-promo-right">
<div class="promo-right-content">
*content*
</div>
</div>
</div>有谁知道如何找到使用farbtastic颜色选择器时选择的当前值？我目前的代码是:
$('#colorpicker').farbtastic('#color');
var curColor = $.farbtastic('#colorpicker').color;
$('#color').change(function () {
curColor = $.farbtastic('#colorpicker').color;
});
我首先初始化应用程序并将其内容放在一个名为colorpicker的div中,输入#color.我只是希望名为curColor的变量始终保持颜色选择器的当前值,并在其更改时进行更新.
我的目标是每行使用三个伸缩项目，space-between以便每行的第一和第三项目接触容器的外部，但保持相等的间距。
这可以按预期工作，但是当第五项未按我的要求对齐时，在第二行的第二行出现了问题。我将拥有可变数量的内容，因此需要布局可与任意数量的盒子配合使用。
我在下面显示了我的代码。谁能告诉我该如何解决？
.main{
background: #999;
margin:0 auto;
width:1300px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box{
background: #7ab9d7;
color: #555;
height: 300px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>