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

Question

在给定的代码中，我需要标识第一行的最后一个元素和最后一行的第一个元素。只是为了从各个角度来回它。我怎样才能做到这一点？我在这里需要指出的是，根据屏幕尺寸，第no列以及第一行的最后一个元素和最后一行的第一个元素都会有所不同。

.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中的所有元素应用“ 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>