How can I get calculated of each of three elements in row can have 300px width?

Question

Im trying to make "my own framework" using flexbox. The most headache of flexbox when in row an odd number of element: 3, 5 , 7. So I want to solve it using js/jq. For example if width of element is 300px or less - element becomes 100% of width. I'm using jq code:

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)

}

But the issue is when the function set the width of element to 100% according to CSS rule, the script recalculates according to its IF statement and the elements start to blink. Can anyone help me to solve this? The code is in snippet.

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

You don't actually need any JavaScript/jQuery code for this. In this case, just use CSS media queries to handle the resizing.

Knowing the items should be 100% wide when the screen is less then 900px wide (900px / 3 = 300px), you can use a media query defining the width.

Fiddle (containing full example): http://jsfiddle.net/gfsb82p9/

CSS

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

Answer 2

If you do want to keep using the jQuery way, you need to do the width check on the window and not on the element since the element width goes above 300 px when you add the class in.

See amended code below.

function check() {
  var windowWidth = $('body').outerWidth();
  var width = $('.one-third').outerWidth();

  if (windowWidth < 900) {
    console.log(windowWidth);
    if ($('.one-third').hasClass('one-third-full') != true) {
      $('.one-third').addClass('one-third-full');
    }
  } else {
    console.log(width);
    if ($('.one-third').hasClass('one-third-full')) {
      $('.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>