What strategies can I employ with flexbox to achieve my design goals?

How can I achieve my design requirements using flexbox?

design requirements

The current code that I have implemented follows the flexbox approach to meet the design requirements. However, the output of this code does not match the screenshot of my design requirements. I am seeking guidance on how to make adjustments to achieve the desired outcome.

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

@media screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
  }
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

The current output generated by the code above can be viewed here: flex output

Answer №1

Based on the example in your photo, I have redesigned the layout with some new classes and changes to the HTML structure. If you find this solution helpful, please consider accepting it. Otherwise, feel free to leave a comment.

HTML CODE below


<div class="container">
    <div class="firstSection">
        <div class="item item1"></div>
    </div>
    <div class="secondSection">
        <div class="item item2"></div>
        <div class="item item3"></div>
    </div>
</div>

Style


    .container {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }

    .secondSection {
        display: flex;
    }

    .item {
        width: 100px;
        height: 100px;
        display: block;
    }

    .item1 {
        background: red;
    }

    .item2 {
        background: blue;
    }

    .item3 {
        background: green;
    }

    @media screen and (max-width: 720px) {
        .container {
            flex-direction: column-reverse;
        }
        .secondSection{
            justify-content: flex-end;
        }
    }

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

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizo ...

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

What is the best way to generate an HTML snapshot using C#?

I'm currently working on a page with Ajax functionality and I'm interested in making it SEO crawlable. After reviewing Google's guidelines at https://developers.google.com/webmasters/ajax-crawling, I learned that I need to use "#!" to create ...

Discover the best way to showcase items within an arrayList using dual CSS styles!

I'm currently working on a project that involves an arrayList with two names: Bob and Steve. I have the requirement to display them in different colors, where Bob should be displayed in green and Steve in red. Component.CSS .Bob{ font-weight:bold; ...

What is the best way to share an HTML element across multiple pages in Next.js?

I am in the process of developing a website that features a table of contents with links on the left side, content sections in the middle, and an overview on the right. For a visual representation of the general concept, please visit: Currently, all code ...

JavaScript's Math.round function does not always produce accurate results

After adding the specified line within the function, the code seems to encounter issues. parseLocalFloatCnt: num = Math.round(num*1.2); Is there a solution available for this problem? Your help is much appreciated. <!DOCTYPE html> <html> < ...

I am working with three columns and I am looking to keep the center column fixed in place while scrolling

Check out this CSS snippet: #container { margin: 0 auto; width: 1200px; } #col1 { float: left; width: 700px; } #col2 { float: left; width: 100px; padding: 0 17px; } #col3 { float: left; width: 400px; } I am trying t ...

Creating a Shadow Effect on CSS Triangles

I have created a unique design that resembles a large arrow pointing to the right. <div style=" font-size: 0px; line-height: 0%; width: 100px; border-bottom: 80px solid #8cb622; border-right: 62px solid #dadbdf; "></div> <div style=" font ...

What is the best way to access a specific attribute of an HTML element?

Within my ng-repeat loop, I have set a custom attribute like this: <div ng-repeat="item in itemsList" stepType="{{item.stepType}}"> {{item.itemValue}} </div> The possible values for item.stepType are 'task' or 'action ...

The background size cover feature is not functioning properly on mobile devices, especially on longer pages

In my Next.js project, I am encountering an issue with the background image not displaying on longer pages when viewed on a Google Pixel 3a device. Here is how it looks on shorter pages that do not exceed the viewport height: https://i.sstatic.net/jJBTy.pn ...

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

Can microdata be concealed using CSS without any problems?

Imagine having an HTML document filled with a substantial amount of text. Would it be considered "good" (or at least not bad) practice to include elements containing microdata that are hidden from the user's view? For example: <div style="display ...

Guide to building a robust tab system using JQuery and Ajax

I am currently working on a mockup page where the accordion feature is functioning well. However, I am looking to implement a tab-like system that will allow users to navigate between different pages. Specifically, I want users to be able to click on page ...

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

Currently, my challenge involves applying opacity to a background color sourced from the fluent UI library, which utilizes Design Tokens. Typically, I would add opacity to a background color like this: background-color: "rgba(255, 255, 255, 0.5)" However ...