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

Dynamic div positioned over image

Is there a way to create a responsive div on top of a responsive image? I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance? Check out the codePen here HTML Code: <div class="container-fluid ...

htmlcsstwitter-bootstrap

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

There is a single div sandwiched between two others, with each of the surrounding divs reaching the edge of the browser

Require a small space between the middle div and the two on each side. The middle bar should have a fixed width. Here is my attempt so far, but it seems messy: <!DOCTYPE html> <html> <head> <style> #container { width: auto; ...

htmlcss

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...

javascripthtmlvideohtml5-video

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

javascriptjqueryhtml

aligning adaptable grid on the screen

Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code: <!DOC ...

css

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

javascripthtmlcss

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

I need to set up a text field and submit button that will redirect users based on their input: index.html: If the user inputs "123" in the text box and clicks submit, they should be redirected to john.html page. AND If the user inputs "456" and clicks s ...

javascripthtmlformsinputtextbox

Steps to turn off Bootstrap's fixed navigation on mobile devices

When a user visits the mobile version of the website or scales the webpage, the Bootstrap navbar will no longer remain fixed at the top. I am looking to set it as a normally scrolling view in the navbar. The Bootstrap class is "navbar-fixed-top" Click he ...

htmlcsstwitter-bootstrap

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...

javascripthtmlcsscss-grid

Sending data to API using AngularJS Http Post

Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...

javascriptangularjshtmlapi

Disable error display using PHP for the image field with the value stored in $.row['img']

Currently seeking assistance. I have utilized [ onerror=this.style.display="none"] but it suddenly stopped functioning. Unable to find a solution, is there an alternative to the following method? <img class="basicimg" src='.$row['anncimg&apos ...

phphtmlerror-handling

Divide the PHP code into separate files

Can someone help me with a coding dilemma I have? I couldn't find any information on Google or this site about it. A friend of mine who has experience in website development and runs his own business uses an interesting system that is new to me. He ...

phphtmlincludesplit

The HTML checkbox is initialized as checked when the page loads

Is there a way to set the checkbox as unchecked in HTML? I have tried multiple ways, but it always loads as checked <input id="chkBox" checked type="checkbox" /> <input id="chkBox" checked=false type="checkbox" /> <input id="chkBox" checked ...

htmlcheckbox

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Welcome to my first post on this platform! I have a new project where I am creating a website for a client who wants to easily embed their own YouTube links. As a beginner in web development, this is my first paid task and I'm curious about how I can ...

phphtmlsqldatabasevideo-embedding

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Hey there! I'm currently working on adding some spinning text, similar to a carousel, using keyframes in my React app. The setup involves MUI v5 with @emotion. Basically, I want a "box" element to show different words every few seconds with a rotating ...

javascriptcssreactjsmaterial-uiemotion

Incorporating a Menu within a TableCell using Material-UI

I have a desire to incorporate Google's Material UI Menu Item inside a TableCell, following their documentation guidelines here in this illustration: https://i.stack.imgur.com/IffEM.png This is my current method: import React from 'react' ...

javascripthtmlcssreactjsmaterial-ui

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...

javascriptcss

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

javascriptjqueryhtmlcssfirefox

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss