Locate the final flexbox in the initial row and the initial flexbox in the concluding row

Question

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first element of the 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>

jquery html css flexbox

Answer 1

Answer №1

If you want to achieve this effortlessly, follow these steps:

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

For those looking for a jQuery solution, here it is. It categorizes elements in different rows and applies specific styles accordingly.

$(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;
} 
/* More CSS Styles Here */

<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>Text</span>
  <span>Example</span>
  <span>New</span>
  <span>Content</span>
  <span>Updated</span>
</div>

Answer 2

If you want to achieve this effortlessly, follow these steps:

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

For those looking for a jQuery solution, here it is. It categorizes elements in different rows and applies specific styles accordingly.

$(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;
} 
/* More CSS Styles Here */

<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>Text</span>
  <span>Example</span>
  <span>New</span>
  <span>Content</span>
  <span>Updated</span>
</div>

Answer 3

Answer №2

Here is an alternative solution to the problem at hand. I wanted to document it for future reference:

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

Answer 4

Here is an alternative solution to the problem at hand. I wanted to document it for future reference:

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

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

Answer №1

Answer №2

Similar questions

Is gulp.dest set to match the current file?

Custom Bootstrap 3 Panel Organization

What is the best method in JavaScript to create three different shades of a color?

How can one address the issue of undefined data within table cells?

Navigate through JSON data to uncover the tree structure path

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Trouble with Div Alignment in Web Browsers: Firefox vs. Google Chrome

The element's width set to 100% is not functioning properly when used within a container

Space within a series of photographs

What is the most effective method for tracking file upload progress using SSE?

Using Jquery's .click function to display the correct value retrieved from a loop

Faulty Container - Excessive spacing issues

Room available on the body's right side for tiny gadgets

What is the best way to align an image underneath text?

What is the reason behind jQuery onePageNav adding the 'current' class to each 'li' element?

Integrating Python Script with User Input and Output within a JavaScript Web Application

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Issue encountered when attempting to develop a countdown timer using Typescript

Methods for retrieving and persisting the data from a particular row within a table using JavaScript or jQuery

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?