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

Question

我试图制作自己的框架＆＃34;使用flexbox。当行中有奇数个元素时，最令人头疼的是flexbox：3,5,7。所以我想用js / jq来解决它。例如，如果元素的宽度为300px或更小 - 元素变为宽度的100％。我使用的是jq代码：

do {
    let someValue = 9
    for i in 1 ... 10000 {
        ...
    }
}

但问题是当函数根据CSS规则将元素的宽度设置为100％时，脚本会根据其IF语句重新计算，并且元素开始闪烁。任何人都可以帮我解决这个问题吗？ 代码在片段中。

＆＃13;

＆＃13;

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)

}

＆＃13;

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()
});

＆＃13;

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) {
  
  
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

<强> CSS

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

Answer 2

如果你想继续使用jQuery方式，你需要在窗口而不是元素上进行宽度检查，因为当你添加类时元素宽度超过300像素。

见下面的修改代码。

＆＃13;

＆＃13;

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()
});

＆＃13;

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) {}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;