如何计算行中三个元素的每一个可以有300px宽度？

Question

我试图使用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) {
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fbox dns">   
  <div class="one-third"></div>
  <div class="one-third"></div>
  <div class="one-third"></div> 
</div> 


<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-half"></div>
</div>
  
 <div class="fbox">  
  <div class="one-third"></div>
  <div class="one-third"></div>
  <div class="one-third"></div> 
</div> 
   
<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>
  
  <div class="fbox"> 
  
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
  <div class="one-five"></div>
</div>

<div class="fbox"> 
  <div class="one-half"></div>
  <div class="one-five"></div>
  <div class="one-third"></div>
</div>
  
  <div class="fbox"> 
  <div class="one-four"></div>
  <div class="one-third"></div>
  <div class="one-half"></div>
</div>

<div class="fbox"> 
<div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
  <div class="one-four"></div>
</div>

<div class="fbox">
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
  <div class="one-six"></div>
</div>
</div>


<div class="truth"></div>

Answer 1

您实际上不需要任何 JavaScript/jQuery 代码。在这种情况下，只需使用CSS 媒体查询来处理大小调整。

100%知道当屏幕900px宽度小于 ( ) 时项目应该很宽900px / 3 = 300px，您可以使用定义宽度的媒体查询。

小提琴（包含完整示例）：http://jsfiddle.net/gfsb82p9/

CSS

@media only screen and (max-width: 900px) {
  .one-third {
    flex: 1 100%;
  }
}