Question

我有几个盒子，使用Flexbox作为容器，列表标签作为盒子里面。当你调整宽度时，它们会响应并改变位置。我试图通过jQuery找出一种方法，以检测哪些框触及左侧，哪些框触及右侧，以便我addClass或right left基于它们他们的造型定位。我认为使用偏移可以实现这一点，我正在弄清楚如何开始。有任何想法吗？

JSFiddle

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

Answer 1

这是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）如果需要更改它。

希望它有所帮助！

Answer 2

我创建了这个小函数，帮助我在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);

        });
      }

Answer 3

$.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;
        }
    })
})

jQuery：检测Flexbox中的位置

3 个答案: