作者：谢谢巷议 | 2023-09-10 10:55
我试图使用flexbox制作"我自己的框架".当行中有奇数个元素时,最令人头疼的是flexbox:3,5,7.所以我想用js/jq来解决它.例如,如果元素的宽度为300px或更小 - 元素变为宽度的100%.我正在使用jq代码:
function check() {
var window = $(document).outerWidth();
var width = $('.one-third').outerWidth();
if ( width < 300 ) {
$('.one-third').addClass('one-third-full')
}
else {
$('.one-third').removeClass('one-third-full')
}
$('.one-third').text(width)
}
但问题是当函数根据CSS规则将元素的宽度设置为100%时,脚本会根据其IF语句重新计算,并且元素开始闪烁.任何人都可以帮我解决这个问题吗？代码在片段中.
function check() {
var window = $(document).outerWidth();
var width = $('.one-third').outerWidth();
if ( width < 300 ) {
$('.one-third').addClass('one-third-full')
}
else {
$('.one-third').removeClass('one-third-full')
}
$('.one-third').text(width)
}
$(document).ready(function() {
check()
});
$(window).resize(function() {
check()
});
body {
background: #C38D94;
font-family: 'Arvo', serif;
}
.fbox {
display: flex;
flex-flow: row wrap;
}
.one-half:after, .one-third:after, .one-four:after, .one-five:after, .one-six:after {
position: absolute;
top: 0;
right: 0;
}
.one-half:after {
content: '2';
}
.one-third:after {
content: '3';
}
.one-four:after {
content: '4';
}
.one-five:after {
content: '5';
}
.one-six:after {
content: '6';
}
.one-half, .one-third, .one-four, .one-five, .one-six{
position: relative;
padding: 30px;
background: #565676;
margin: 1px;
text-align: center;
color: #fff;
box-sizing: border-box;
}
.one-half {
flex: 1 calc(50% - 4px);
min-width: 300px;
}
.one-third {
flex: 1 calc(30% - 4px);
}
.one-four {
flex: 1 calc(25% - 4px);
}
.one-five {
flex: 1 calc(20% - 4px);
}
.one-six {
flex: 1 calc(15% - 4px);
}
.one-third-full {
flex: 1 100%;
}
.to-column {
flex-flow: column
}
@media only screen and (max-width : 640px) {
}
京公网安备 11010802040832号 | 京ICP备19059560号-6