CODEWITHSUNDEEP
jqueryhtmlcssflexbox
Ahmad Ismail
Ahmad Ismail

Reputation: 13862

Identify the last flexbox of first Row and first flexbox of last row

In the given code I need to identify the last element of the first Row and First element of the last row. Just to make it round from all corners. How can I do that? I need to mention here that the column no will vary as well as the last element of first row and first element of last Row according to the screen size.

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

Upvotes: 2

Views: 1973

Answers (2)

Robert McKee
Robert McKee

Reputation: 21487

If you can get away with this, then it's easy:

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

Here's the jQuery solution. It applies 'firstrow' to all elements in the first row, 'lastrow' to all elements in the lastrow, 'firstinrow' to the first element of each row, and 'lastinrow' to last element of each row.

$(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>

Upvotes: 6

Ahmad Ismail
Ahmad Ismail

Reputation: 13862

I got another solution for the same problem. For future reference, I would like to mention it here 

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

Upvotes: 1

Related Questions