当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何计算行中三个元素的每一个可以有300px宽度?》经验,为你挑选了0个好方法。

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

推荐阅读
谢谢巷议
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有