Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container?

Given the HTML provided, how can I achieve this layout using flexbox?

I attempted to accomplish this with CSS Grid for IE compatibility but encountered issues due to partial support. Now, I am exploring options to make it work specifically for IE.

Codepen: https://codepen.io/anon/pen/ewqmXw

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item2half">2.5</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

htmlcssflexbox

Answer №1

Let's break down your requirements:

  • Item 2.5 should be positioned under item 2
  • The layout must use flexbox and not Grid
  • No changes can be made to the HTML structure

Here is a proposed solution:

  • Each flex item has a width of 50px
  • You will have 4 items per row
  • To achieve this, set the container width to 200px and each item to width: 25%
  • Enable wrapping by setting the container property to wrap
  • Create a pseudo-element to act as the sixth invisible item below item 2
  • Use the order property to place item 2.5 at the end

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.item-1 {
  flex: 0 0 25%;
  order: 1;
  background-color: rgba(200, 520, 266, 0.75);
}

.item-2 {
  flex: 0 0 25%;
  order: 2;
  background-color: rgba(145, 223, 0, 0.75);
}

.item-3 {
  flex: 0 0 25%;
  order: 3;
  background-color: rgba(145, 520, 0, 0.75);
}

.item-4 {
  flex: 0 0 25%;
  order: 4;
  background-color: rgba(0, 0, 0, 0.25);
}

.flex-container::after {
  flex: 0 0 25%;
  order: 5;
  background-color: transparent;
  content: "";
}

.item2half {
  flex: 0 0 25%;
  order: 6;
  background-color: aqua;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item2half">2.5</div>
  <div class="item-4">4</div>
</div>

Answer №2

I have inserted item2half into the item-2 section of the div.

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2
    <div class="item2half">2.5</div>
  </div>
  <div class="item-3">3</div>
  <div class="item-4">4</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

The event.target.x attribute on the <i /> tag element

In my code, there is an <i name="documentId" onClick={this.openDocument}/> element with the onClick method defined as follows: openDocument(event) { const { name } = event.target; console.log('name', name); console.log('target&a ...

javascripthtmlreactjs

The image being displayed is significantly wider than the corresponding HTML element

I'm attempting to display this webpage in PNG format using npm's wkhtmltox: <!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { padding: 0; width: 340px; } ...

javascripthtmlnode.jswkhtmltoimage

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

The Boostrap card-deck appears to be see-through and malfunctioning

This problem has been puzzling me for quite some time now, and I just can't seem to find the solution! Kindly disregard the other language and code - the card is located under the jumbotron. (To access the link, remove spaces: https://code pen.io/ano ...

htmlcssbootstrap-4

What could be the reason behind jQuery replacing the entire span with .text?

I am dealing with the following HTML code snippet: <p><input id="revenue" type="text" value="100000" /><span id="howmuch"><a href="" class="ka_button small_button small_cherry" target="_self" style="opacity: 1; "><span>How Mu ...

javascriptjqueryhtml

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

javascriptjqueryhtmlajax

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Struggling to eliminate the extra space surrounding the Kendo UI chart below. Could this be due to a gap or spacing issue? The goal is to create a single-line bar chart with only grey appearing on the right side. Access JSFiddle Codes Here $(doc ...

javascriptjquerycsskendo-uikendo-dataviz

Retrieving the text from the img tag of a bs4.element.Tag

I have a question that needs to be addressed. My concern involves a list of bs4.element.Tags, similar to the one illustrated in the image below. The issue at hand is filtering out only the href tags that are preceded by an <img> tag. How can this s ...

pythonhtmlimagebeautifulsouptags

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Guide to personalizing the ngxDaterangepickerMd calendaring component

I need to customize the daterangepicker library using ngxDaterangepickerMd in order to separate the start date into its own input field from the end date. This way, I can make individual modifications to either the start date or end date without affectin ...

javascriptcssangulartypescriptbootstrap-4

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

javascripthtmlreactjswebpackredux

How come I'm encountering issues when trying to click on the "register-selection" button in my Bootstrap and JS setup?

I am facing a challenge while developing my website. I want to trigger an alert when the "register-selection" is clicked, but despite trying both Jquery and vanilla Javascript, I have not been successful. Even after searching online resources and ChatGPT f ...

javascripthtmljquerycssbootstrap-5

The use of CSS float creates spaces between elements

Is there a way to stack the green DIVs on top of each other without any space between them in the given simple HTML code? I'm puzzled by the gap between the third and fourth green DIVs. * { margin: 0; } .left { width: 20%; background-color: # ...

htmlcss

Strange occurrences observed in the functionality of Angular Material Version 16

Encountered a strange bug recently. Whenever the page height exceeds the viewport due to mat-form-fields, I'm facing an issue where some elements, particularly those from Angular Material, fail to load. Here's a GIF demonstrating the problem: GI ...

htmlangulartypescriptangular-material

What is the best way to eliminate blank values ("") from an array?

I am working with a two-dimensional array that was generated from an HTML table using jQuery, but I have noticed that some values are empty and are displaying as "". How can I go about removing these empty values from the array? <table> ...

javascriptjqueryhtmlarraysjson

Emphasize a checkbox by selecting it when another checkbox is checked

I have a question about checkboxes and highlighting the checkmarks. The issue I am facing is that I have multiple checkboxes with the same ID for different screen resolutions. When I click on the label for "Check 1" it highlights the corresponding checkmar ...

javascripthtmlcss

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...

csssasscss-transitions

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

htmlmagentolocate

Different ways to restrict Table Header to 2 lines using CSS

When it comes to limiting text to a specific width, using white-space:nowrap is usually the go-to solution. However, I am facing a unique challenge where I need to make sure my header text fits within a specific width. I initially tried adding individual ...

htmlcss