adjusting the arrangement of flex elements

I have a container with multiple divs and am utilizing the flexbox model. My goal is to achieve a specific layout using CSS without altering the order of the div tags.

https://i.sstatic.net/jdAK6.png

The desired outcome is to have the div with the value "8" appear first in the second row.

For reference, I have included the codepen link: codepen.

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  // align-items:flex-start;
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">8</div>
  <div class="item">7</div>
  <div class="item">6</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">8</div>
  <div class="item">12</div>
</div>

Answer №1

To achieve the ultimate objective, you have the option to utilize :nth-child() along with order for reordering them.

.container {
position: relative;
display: flex;
flex-flow: row wrap;
 // align-items:flex-start;
  align-content: space-around;
  justify-content:flex-start;
  
}

.item {
background-color: tomato;
box-sizing: border-box;
padding: 20px;
outline: 2px solid blue;
  flex-basis: 20%;
  
}
.item-inside{
  display:none;
  background-color: #ABABAB;
  box-sizing:border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis:80%;
}

.show {
  display:block; 
 
}

.hide {
  display:none;
}

.item:nth-child(-n+5), .item:nth-child(8) {
  order: -1;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

Answer №2

To adjust the order of flex items, utilize the CSS property order.

By default, all flex items have an order value of 0.

Items with the same order value will be displayed in the order they appear in the source code.

div.item:nth-child(1)  { order: -1 }
div.item:nth-child(2)  { order: -1 }
div.item:nth-child(3)  { order: -1 }
div.item:nth-child(4)  { order: -1 }
div.item:nth-child(5)  { order: -1 }
div.item:nth-child(6)  { order:  1 }
div.item:nth-child(7)  { order:  1 }
div.item:nth-child(8)  { order:  0 }
div.item:nth-child(9)  { order:  1 }
div.item:nth-child(10) { order:  1 }
div.item:nth-child(11) { order:  1 }
div.item:nth-child(12) { order:  1 }

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  /* align-items:flex-start; */
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

div.item:nth-child(1) {
  order: -1
}

div.item:nth-child(2) {
  order: -1
}

div.item:nth-child(3) {
  order: -1
}

div.item:nth-child(4) {
  order: -1
}

div.item:nth-child(5) {
  order: -1
}

div.item:nth-child(6) {
  order: 1
}

div.item:nth-child(7) {
  order: 1
}

div.item:nth-child(8) {
  order: 0
}

div.item:nth-child(9) {
  order: 1
}

div.item:nth-child(10) {
  order: 1
}

div.item:nth-child(11) {
  order: 1
}

div.item:nth-child(12) {
  order: 1
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</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 way to assign classes to the appropriate element based on the counter value?

Is there a way to add a class to the element that corresponds to a counter in jQuery? I currently have this code: var li_counter = 0; $("#trigger_heritage").click(function () { if(heritage_position >= heritage_versatz*13){ li_co ...

Guide to creating a search bar that scans the text inside an external .txt file

Kindly scroll down to view the updated content, or read through from here for a better understanding of my requirements. I am seeking assistance from an expert in developing a website (not exactly my forte :D) which allows users to search for their banned ...

Customizing default styles in Bootstrap

Struggling to change the color and border in a Bootstrap nav bar with SCSS. Despite writing the code below, nothing seems to happen: .nav-link.active { color: #495057; background-color: chartreuse; border-color: black; } After inspecting the e ...

Is it possible to slide-toggle and alter the background color of a div when clicked?

Imagine having several div's on a webpage all with the ID of "Toggle". Each div contains two other smaller divs. "Headline" which is always visible. "Comment" which appears/disappears when the headline is clicked (initially hidden). How could I ac ...

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: https://i.sstatic.net/daaec.jpg. I'm aiming for no button o ...

In JavaScript, when a div element contains an iframe, the click event will not trigger on the div

Check out this sample HTML markup: <div> <iframe></iframe> </div> The iframe is set to fill the outer div. I've added an event handler to the div click event: div.addEventListener("click", function () { console.log( ...

Is there a way to determine if a variable includes Chinese or Japanese characters?

Is there a way to determine if a variable includes Chinese or Japanese characters? I have found this line effective: if (myVariable.match(/[\u3400-\u9FBF]/)) My goal is to apply the same concept to a specific variable, rather than the entire do ...

Using Vue to toggle an active HTML class on click: A tutorial

Can someone assist me with this code snippet that is intended to toggle a class using a Vue on-click event? I'm encountering issues as it's not working and I'm seeing several errors in the console. Any help would be appreciated. <div id=& ...

Synchronize CSS Properties with JavaScript Event

Is there a more efficient way to synchronize two properties using JavaScript or JQuery? For instance, when I have an editable text field and I switch it to an input box upon double click, how can I ensure that the input box adjusts its size along with the ...

Tips for designing custom dropdown menus within the WordPress menu editor

Just starting out with coding. I recently learned how to customize my website's navigation menu using menus section in the Wordpress dashboard. However, I'm struggling to create dropdown menus for child/sub pages without manually entering all th ...

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

In search of assistance in designing a simple baseball bases illustration

I am working on creating an indicator to identify which bases have a person on them. Utilizing Bootstrap React's Container, Row, and Col for positioning, I have also designed my own CSS classes for the triangles. However, I am facing a challenge in ge ...

Determining the dimensions of text elements using Selenium

I have encountered a simple issue that I cannot seem to resolve. I am attempting to find the width of text within a div that also contains an image. The problem is that the paragraph's width matches that of the div element, but the actual text is wrap ...

Using session variables on a different php page

Having trouble using a session variable in another page? I fetched data from a database and stored it in a variable, but when I attempt to use it on another page, I get an error saying 'undefined index'. See the code below - can someone help me s ...

Adjusting the zoom feature in CSS3

I'm looking to have my React app display as if the user has changed the zoom level to 90%. I attempted to tackle this issue using CSS. body { transform: scale(0.9); } However, this method did not result in the screen appearing similar to wh ...

Having trouble with my JQuery image slider... Can anyone help troubleshoot what I might have missed?

I am trying to create a simple image slider, but it doesn't seem to be working. I followed a tutorial on YouTube closely, but since I can't compare my code with theirs on a website, I'm having trouble identifying the mistake. Despite followi ...

Injecting information into an input field using the :before pseudo-class in CSS when focus

In order to have a static part "+91" displayed in an input field upon focus, I have successfully replaced the placeholder during onFocus and onBlur events. However, I am unable to add a listener to read content from :before. <div class="goal-mobile"> ...

Tips on executing a $.get request while submitting a form?

Instead of using AJAX to submit my form, I am trying to implement a progress bar by making GET requests to the server while the form is submitting. This is particularly important when dealing with multiple file uploads that may cause the submission to take ...

Interactive phone photo gallery

I am looking to create a mobile webpage that allows me to swipe my finger left or right in the middle of the page to scroll between images. Here is an example photo: I want to be able to swipe through the images with my finger. Any suggestions on how I ...

Javascript-created HTML elements are failing to display on the webpage

As a newcomer to javascript, I am trying to dynamically create HTML elements using javascript for a class project. However, I am facing an issue where nothing is displaying on my page. Any help or guidance on what I might be missing would be greatly apprec ...