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

时间：2015-06-05 18:27:10

标签： jquery html5 css3 flexbox

在给定的代码中，我需要识别最后一行的第一个Row和First元素的最后一个元素。只是为了让它从各个角落变圆。我怎样才能做到这一点？我需要在这里提一下，根据屏幕尺寸，列no将与第一行的最后一个元素和最后一行的第一个元素一样。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：4)

如果你可以逃脱这一点，那么很容易：

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

答案 1 :(得分：2)

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

＆＃13;
＆＃13; 
    (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");
    })();
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题