Interrupt the current with an external factor

I am working with a flexbox layout that currently looks like this:

https://i.stack.imgur.com/ULHEk.jpg

My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next position, similar to this example:

https://i.stack.imgur.com/3CAb6.jpg

The flexbox I am dealing with is essentially a sorting container, meaning I cannot add anything inside other than the elements being sorted. Typically, the columns have equal heights, but occasionally I need the first column to be slightly shorter.

I have experimented with setting the boxes to flow: left and display: inline-block in various combinations, but so far, I have been unable to achieve the desired result.

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>

Here is a fiddle

Edit My focus is specifically on the bottom-left corner, so any creative solution would suffice.

htmlcssflexboxcss-float

Answer №1

To achieve a specific layout using flex-wrap: wrap-reverse, column-reverse for the flex direction, and justify-content: flex-end, you can configure the elements in a particular way, but not necessarily in the order you might expect.

Keep in mind that although the order of the elements is reversed in the code, the visual result may differ - check out the demo provided below:

.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: column-reverse; /* CHANGED */
  flex-wrap: wrap-reverse; /* CHANGED */
  justify-content: flex-end; /* CHANGED */
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
  margin-left: auto;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">
  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>
  <div class="box"></div>
</div>

Answer №2

While not the perfect solution, this code snippet could serve as a starting point for enhancements (such as incorporating ajax). Hopefully, you find this helpful!

var element = document.getElementsByClassName('box')[0];
var rect = element.getBoundingClientRect();
x = rect.left;
w = rect.width;
var xa = document.getElementsByClassName('inbox');
var k = Array.from(xa).slice(-1).pop();
var rect2 = k.getBoundingClientRect();
x2 = rect2.left;
if(x+w > x2){
console.log(x + w , x2)
 k.style.left =+ (x) +"px";
}
.container {
  width: 120px;
  height: 180px;
  margin: 40px 0 0 100px;
}

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 120px;
  height: 180px;
  background: pink;
}

.inbox {
  position:relative;
  width: 50px;
  height: 50px;
  margin: 5px;
  background: purple;
  color: #fff;
}

.box {
  float: left;
  width: 110px;
  height: 60px;
  margin: -60px 0 0 -60px;
  background: orange;
}
<div class="container">

  <div class="flexbox">
    <div class="inbox"> 1 </div>
    <div class="inbox"> 2 </div>
    <div class="inbox"> 3 </div>
    <div class="inbox"> 4 </div>
    <div class="inbox"> 5 </div>
  </div>

  <div class="box"></div>

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

What is the best method for applying a style specifically to controls located on the lower part of the

I am currently working on designing a table in a webpage and need to set styles for the <td> tags. Is it possible to apply different styles to the upper and lower cells? Can I use a <style> that specifically targets the bottom <td> tags? ...

htmlcss

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

phphtmlmysql

Eliminating divs and preserving content

Is there a way to remove certain DIV elements using jQuery or pure JavaScript without affecting the content within them? Here is an example structure: <div class="whatever_name"> <div class="whatever_name"> <h2>subtitle</h2&g ...

javascriptjqueryhtml

Is it possible to dynamically refresh a Void and PlaceHolder without requiring a full page reload?

Is there a way to automatically update a Void/PlaceHolder using SQL queries without refreshing the entire ASP page? I attempted to use an ASP timer without success. SOLUTION: After experimenting with asp:updatapanel, I discovered a solution that worked ...

c#htmlasp.net.netvoid

Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

My setup involves two Grid components, with one structured like this: <Grid container alignItems="stretch" spacing={3}> <Grid className="left-pane" item md={4} xs={12}> <Navigation /> </Grid> <Grid className="right-pan ...

cssreactjsmaterial-ui

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Is there a way to access and display a website page hosted at this URL - , without encountering any authentication dialog box from my application on the same network? I have been unable to bypass the username and password entry request. I successfully imp ...

javascripthtmlajax

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

Need to swiftly modify values of css attributes?

Here is a snippet of the code I am working with: <div></div> <button> Go </button> div { width: 50px; height: 50px; border: 1px solid #ccc; } var bgs = ['red', 'blue', 'yellow', 'green&apo ...

javascriptjquerycss

Brainstorm: Creative ways to showcase excess content within a div

I'm struggling to find a suitable title for this issue. Essentially, I have a box-shaped div that expands into a rectangle and reveals content when clicked. The problem arises when I animate the div's width during expansion. Instead of positioni ...

jqueryhtmlcssoverflow

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

javascripthtmlcss

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

htmlcssangularjs

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

htmlcsscss-animationscss-transitions

Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website. However, I have encountered an issue where the icon does not display correctly ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Create a right-to-left (RTL) CSS file within a create-react-app project and dynamically switch between them depending on changes

I am currently working on a multi-language project using create-react-app. My goal is to incorporate a library like "cssJanus" or "rtlcss" to transform the Sass generated CSS file into a separate file. This way, I can utilize the newly created file when sw ...

cssreactjscreate-react-appright-to-leftrtlcss

A-Frame VR: Image missing from display on Chrome browser

UPDATE: I discovered that the issue was caused by running the HTML file from my local hard drive instead of a web server. Once I uploaded it to my web server and ran it from there, everything worked perfectly. A-Frame Version: 0.4.0, Chrome: 55.0.2883.87, ...

javascripthtmlaframewebvr

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...

jqueryhtmljquery-uicss

What are the ways to recognize various styles of handlebar designs?

Within my project, I have multiple html files serving as templates for various email messages such as email verification and password reset. I am looking to precompile these templates so that they can be easily utilized in the appropriate situations. For ...

htmlnode.jstypescripthandlebars.js

Customizing skin CSS for DNN Portal and Page images

Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...

cssdotnetnukedotnetnuke-7