识别第一行的最后一个 flexbox 和最后一行的第一个 flexbox

Question

在给定的代码中，我需要识别第一行的最后一个元素和最后一行的第一个元素。只是为了让它从各个角落变得圆润。我怎样才能做到这一点？这里需要提一下，根据屏幕大小，列号以及第一行的最后一个元素和最后一行的第一个元素会有所不同。

.container {
    display: flex;
    flex-wrap: wrap;
}
.container > span {
    flex: auto;
    padding: 5px;
    background: gray;
    border: 1px solid;
}

.container > span:first-child {
    border-top-left-radius:10px;
}

.container > span:last-child {
    border-bottom-right-radius:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <span>The</span>
    <span>Quick</span>
    <span>Brown</span>
    <span>Fox</span>
    <span>Jumped</span>
    <span>Over</span>
    <span>The</span>
    <span>Lazy</span>
    <span>Dog</span>
    <span>This</span>
    <span>Is</span>
    <span>A</span>
    <span>Test</span>
    <span>Case</span>
    <span>What</span>
    <span>Can</span>
    <span>I</span>
    <span>Do</span>
    <span>The</span>
    <span>Earth</span>
    <span>Goes</span>
    <span>Round</span>
    <span>The</span>
    <span>Sun</span>
</div>

Answer 1

如果你能摆脱这个，那就很容易了：

.container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid;
  background-color: black;
}
.container > span {
  flex: auto;
  padding: 5px;
  background: gray;
  margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span>The</span>
  <span>Quick</span>
  <span>Brown</span>
  <span>Fox</span>
  <span>Jumped</span>
  <span>Over</span>
  <span>The</span>
  <span>Lazy</span>
  <span>Dog</span>
  <span>This</span>
  <span>Is</span>
  <span>A</span>
  <span>Test</span>
  <span>Case</span>
  <span>What</span>
  <span>Can</span>
  <span>I</span>
  <span>Do</span>
  <span>The</span>
  <span>Earth</span>
  <span>Goes</span>
  <span>Round</span>
  <span>The</span>
  <span>Sun</span>
</div>

这里是 jQuery 解决方案。它将“firstrow”应用于第一行中的所有元素，“lastrow”应用于最后一行中的所有元素，“firstinrow”应用于每行的第一个元素，“lastinrow”应用于每行的最后一个元素。

$(function() {
      $(window).resize(r).trigger('resize');
    });

    function r() {
      $('.container > span').removeClass('firstinrow lastinrow firstrow lastrow');
      var prevtop = -1;
      var firsttop = $('.container > span:first').position().top;
      var lasttop = $('.container span:last').position().top;
      $.each($('.container > span'), function(i, elem) {
        var currtop = $(elem).position().top;
        if (currtop != prevtop)
          $(elem).addClass('firstinrow');
        if (currtop == firsttop)
          $(elem).addClass('firstrow');
        if (currtop == lasttop)
          $(elem).addClass('lastrow');
        prevtop = currtop;
      });
      $('.container span.firstinrow').prev().addClass('lastinrow');
      $('.container span:last').addClass('lastinrow');

    }

.container {
  display: flex;
  flex-wrap: wrap;
}
.container > span {
  flex: auto;
  padding: 5px;
  background: gray;
  border: 1px solid;
}
.container > span.firstinrow {
  color: red;
}
.container > span.lastinrow {
  color: yellow;
}
.container > span.firstinrow.firstrow {
  border-radius: 10px 0 0 0;
}
.container > span.lastinrow.firstrow {
  border-radius: 0 10px 0 0;
}
.container > span.firstinrow.lastrow {
  border-radius: 0 0 0 10px;
}
.container > span.lastinrow.lastrow {
  border-radius: 0 0 10px 0;
}
.container > span.firstrow {
  background: linear-gradient(to bottom, #f5f6f6 0%, gray 33%);
}
.container > span.lastrow {
  background: linear-gradient(to top, #f5f6f6 0%, gray 33%);
}
/* Styles for when we only have a single row */
.container > span.firstrow.lastrow {
  background: linear-gradient(to top, #f5f6f6 0%, gray 33%, gray 66%, #f5f6f6 100%);
}
.container > span.firstrow.lastrow.firstinrow {
  border-radius: 10px 0 0 10px;
}
.container > span.firstrow.lastrow.lastinrow {
  border-radius: 0 10px 10px 0;
}
/* Styles for elements that take up the whole row */
.container > span.firstinrow.lastinrow {
  color: orange;
}
.container > span.firstinrow.lastinrow.firstrow {
  border-radius: 10px 10px 0 0;
}
.container > span.firstinrow.lastinrow.lastrow {
  border-radius: 0 0 10px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span>The</span>
  <span>Quick</span>
  <span>Brown</span>
  <span>Fox</span>
  <span>Jumped</span>
  <span>Over</span>
  <span>The</span>
  <span>Lazy</span>
  <span>Dog</span>
  <span>This</span>
  <span>Is</span>
  <span>A</span>
  <span>Test</span>
  <span>Case</span>
  <span>What</span>
  <span>Can</span>
  <span>I</span>
  <span>Do</span>
  <span>The</span>
  <span>Earth</span>
  <span>Goes</span>
  <span>Round</span>
  <span>The</span>
  <span>Sun</span>
</div>

Answer 2

我为同样的问题找到了另一种解决方案。为了以后参考，我想在这里提一下

    (function() {
    var containerwidth = $(".container").outerWidth();
    var SumWidth = 0;
    var LastElemofFirst;
    var FirstElemofLast;
    $( ".container > span" ).each(function( index ) {
        SumWidth = SumWidth+$( this ).outerWidth();
        var testData = SumWidth%containerwidth;
        //console.log( index + ": " + $( this ).text()+" sumWidth: "+SumWidth);
        if (containerwidth>=SumWidth) {LastElemofFirst = $( this);}
        if(testData > (containerwidth-5) || testData<5){
            if($( this).next().length){
                FirstElemofLast = $( this).next();
            }
        }
    });
    LastElemofFirst.css("border-top-right-radius","10px");
    FirstElemofLast.css("border-bottom-left-radius","10px");
    })();

.container {
display: flex;
flex-wrap: wrap;
border-radius: 10px;
overflow: hidden;
border: 1px solid;
background-color: black;
}
.container > span {
flex: auto;
padding: 5px;
background: gray;
margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <span>The</span>
    <span>Quick</span>
    <span>Brown</span>
    <span>Fox</span>
    <span>Jumped</span>
    <span>Over</span>
    <span>The</span>
    <span>Lazy</span>
    <span>Dog</span>
    <span>This</span>
    <span>Is</span>
    <span>A</span>
    <span>Test</span>
    <span>Case</span>
    <span>What</span>
    <span>Can</span>
    <span>I</span>
    <span>Do</span>
    <span>The</span>
    <span>Earth</span>
    <span>Goes</span>
    <span>Round</span>
    <span>The</span>
    <span>Sun</span>
</div>