我有几个盒子,使用Flexbox作为容器,列表标签作为盒子里面。当你调整宽度时,它们会响应并改变位置。我试图通过jQuery找出一种方法,以检测哪些框触及左侧,哪些框触及右侧,以便我addClass
或right
left
基于它们他们的造型定位。我认为使用偏移可以实现这一点,我正在弄清楚如何开始。有任何想法吗?
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
flex-direction: row;
list-style:none;
}
li {
border:10px salmon solid;
padding: 25px 15px;
text-align: center;
font-size: 1.2em;
background: white;
flex-grow: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
<li>Alabama</li>
<li>California</li>
<li>Florida</li>
<li>Idaho</li>
<li>Kansas</li>
<li>Nevada</li>
<li>New York</li>
</ul>
答案 0 :(得分:3)
这是jQuery代码,将其放在页面底部:
(function(){
function addClass(ul){
ul.children('li.left').removeClass('left');
ul.children('li.right').removeClass('right');
$('ul > li:first-child').attr('class', 'left');
$('ul > li:last-child').attr('class', 'right');
var ulWidth = ul.width();
var totalWidth = 0;
ul.children('li').each(function () {
totalWidth += ($(this).width() + 50);
if (totalWidth > ulWidth) {
$(this).addClass('left');
$(this).prev().addClass('right');
totalWidth = $(this).width();
}
});
}
var ul = $('ul.container');
addClass(ul);
$(window).on('resize', function(){
addClass(ul);
});
}());
代码中的数字50也是'li'左右边距和左右边框,加起来为50.(15 + 15 + 10 + 10)如果需要更改它。
希望它有所帮助!
答案 1 :(得分:3)
我创建了这个小函数,帮助我在flex父容器中使用可变宽度元素做更多技巧,希望它可以帮助一些遇到这个线程的人,jquery选择器不是按性能编写的,所以根据你的需要进行修改:
function setFlexClasses(parent_selector) {
//set parent jquery obj
parent = $(parent_selector);
//remove classes: flex-position-* , flex-row-*
parent.find(' > div').removeClass (function (index, css) {
return (css.match (/(^|\s)(flex-position-.*|flex-row-.*)\S+/g) || []).join(' ');
});
//set helper classes for first and last element of this "list"
parent.find(' > div:first-child').addClass('flex-position-first');
parent.find(' > div:last-child').addClass('flex-position-last');
//initialize positioning variables
var parent_offset = parent.offset();
var max_vertical_space = 0;
var row_count = 0;
//for each element in the query
parent.find(' > div').each(function (index) {
//get element metrics
var element_metrics = $(this).offset();
element_metrics.top -= parent_offset.top;
element_metrics.left -= parent_offset.left;
element_metrics.height = $(this).height();
element_metrics.vertical_space = element_metrics.height + element_metrics.top;
//increment row_count if element is below previous elements and set helper classes for row[first|last]
if(element_metrics.top > max_vertical_space) {
$(this).addClass('flex-position-rowfirst');
$(this).prev().addClass('flex-position-rowlast');
row_count++;
}
//reset max_vertical_space if needed
if(element_metrics.vertical_space > max_vertical_space) {
max_vertical_space = element_metrics.vertical_space;
}
//
$(this).addClass('flex-row-' + row_count);
});
}
答案 2 :(得分:0)
$.each($('ul'), function() {
var w = $(this).width();
var totalwidth = 0;
$.each($(this).children('li'), function() {
var elw = $(this).width();
if (totalwidth == 0) {
$(this).addClass('left');
}
totalwidth += elw;
if (Math.abs(w - totalwidth) < 1) {
$(this).addClass('right');
totalwidth = 0;
}
})
})