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>

jqueryhtmlcssflexbox

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

Ways to remove a dynamic field with jquery

I have developed a script that allows me to add dynamic fields and delete them as needed. However, I am facing an issue where I cannot delete the first element with the "el" class in my script because it removes all elements within the "input_fields_cont ...

javascriptjquerylaravellaravel-blade

The Ajax request for the URL always fails to retrieve the data

Hello everyone, I am having trouble with an ajax request that I have set up. Here is the code snippet: $.ajax({ type: "GET", url: "http://alpha.mywebsite.com/test.html", async: false, success : function() { alert("connec ...

ajaxjquery

The jQuery slider fails to showcase its content

After careful consideration, I decided to start with a small project... But unfortunately, it didn't work. For some reason, the jQuery UI slider won't display on this page. What could be the issue? I made sure to include the jQuery library in ...

jqueryslider

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

Trouble with integrating HTML5 canvas from an external JavaScript file

Having trouble with storing canvas js in an external file. If the javascript responsible for drawing on the canvas is included in the html header, then the rectangle is displayed correctly. Here is the working html (javascript in html header): <!DOCT ...

javascripthtmlhtml5-canvasexternal-js

Combine rows with the same value in the first column of an HTML table

My HTML table has dynamic content, and I need to merge rows in the first column only if their values are identical. You can see an image of the table here. Specifically, if the values in the first column match, those rows should be merged together while le ...

javascripthtmldatatable

How to evenly size overlay divs with CSS

I currently have two divs positioned on top of each other with the following CSS: div.container { position: relative; min-height: 100%; margin:0; padding:0; background:url('http://www.scratchprogramming.org/img/book.png'); ...

htmlcss

Encountering an issue while attempting to generate a dialog popup with jQuery

As a beginner in jQuery, I am attempting to implement a popup dialog box for users in case of an error. However, I'm encountering issues with the following jQuery code: <script type="text/javascript"> $(document).ready(function() { var $dia ...

javascriptjqueryajax

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

csswordpressaccordionbackground-colorvisual-composer

Perform an Ajax call just one time

$('#addToCart').click(function () { let csrf = $("input[name=csrfmiddlewaretoken]").val(); let trTable = $(this).parents('div')[1]; let customPrice = $($(trTable).children('div') ...

javascriptjqueryajax

What is the best way to align a value within CardActions in Material UI?

I'm currently facing an issue with my website design. Here's a snapshot of how it looks: Additionally, here is the code snippet related to the problem: <CardActions> <Typography style={{ fontWeight: 'bold', c ...

cssmaterial-ui

The compatibility between an Ajax client and a Django server across different domains is only possible when using JSONP

Currently, our Django application is functioning on tomcat with Basic Authentication. I am interested in making cross-domain requests, and have found that it only works when using $.ajax({...dataType: 'JSONP',...}). The use of dataType: JSON does ...

jqueryjsonajaxdjango

Positioning Tool Tips with Material Design Lite

While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...

htmlcssmaterial-designmaterial-design-lite

The HTML image link is adorned with a tiny blue checkmark underneath

My a tag with an image inside seems to be extending below the image, resulting in a small blue tic mark on the bottom right side. I've attempted different CSS solutions such as setting border to none, but nothing has resolved the issue. Any assistance ...

htmlcss

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

Resolve a container overflow problem within the footer section

Trying to adjust the footer (newsletter signup form) on this page to fall to the bottom of the page has been a challenge. The #container element appears to be larger than the body, causing layout issues. Any suggestions on how to resolve this? An image d ...

htmlcssshopify

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

javascriptjqueryhtmlvideo