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

Question

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

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