Just starting out with Flexbox - what steps should I take?

In the code, there are three divs arranged in the DOM by div-00#.

I am seeking to achieve the following layout using flexbox (for width >= 460px) as shown in the images below:
https://i.sstatic.net/I2PFQ.png Added: 18-12-16 - https://i.sstatic.net/vQiHg.png Can anyone provide guidance on how to implement this using flexbox?

There is also a second issue with the tab order, but I would like to address the layout first.

ON MOBILE (say < 460px) - within the .div-main:
All divs are 100% of the parent div, ordered .div-001 -div-002 .div-003.

ON DESKTOP (say >= 460px) - within the .div-main:
Due to varying heights, I am avoiding the use of floats, as illustrated in this desktop layout https://i.sstatic.net/STcWe.png.

.div-001 -- Position: Top Right. Height: Varying. Width: 20%. Ideally, the tab index should be 2 (hence using flex to order this as '2'), but note that the order is dictated by the DOM.

.div-002 -- Position: Top Left. Height: Varying. Width: 80%. Ideally, the tab index should be 1 (hence using flex to order this as '1').

.div-003 -- Position: Right (Directly below .div-003). Height: Varying. Width: 20%. Ideally, the tab index should be 3 (hence using flex to order this as '3').

The order is of significant importance.


* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: column;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    height: 70px;
    order: 2;
  }
  .div-002 {
    align-self: flex-start;
    height: 50px;
    order: 1;
  }
  .div-003 {
    height: 20px;
    order: 3;
  }
}
<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

cssflexbox

Answer №1

Struggling to make it work with flexbox?

Here's an alternative solution using CSS Grid if you're not limited by technology:

HTML

body {
  margin: 0;
  padding: 0;
}
main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  height: 300px;
  
}

.box {
  border: 5px solid red;
  padding: 50px;
  
}

.box.three {
  grid-column: 2;
}

@media (max-width: 460px) {
  main {
    display: flex;
    flex-flow: column;
  }
  .box {
    border-color: black;
 
}
<!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Flexer</title>
        </head>
        <body>
          <main>
            <div class="box one">one</div>
            <div class="box two">two</div>
            <div class="box three">three</div>
          </main>
        </body>
        </html>

Answer №2

To solve the issue of .div-desktop-left and .div-desktop-right not aligning next to each other, you should change the flex-direction of .div-main to row and add flex-wrap: wrap.

* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
 a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    /* example */
    height: 70px;
    order: 2;
  }
  .div-002 {
    /* example */
    align-self: flex-start;
    height: 50px;
    order: 1;
  }
  .div-003 {
    /* example */
    height: 20px;
    order: 3;
  }
}
<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

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

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

I have been working on revamping an existing website at www.gjelavoie.com. To enhance the user experience, I decided to use jquery fadein() and fadeout() functions for displaying my Contact form without visitors having to temporarily access the main page. ...

jquerycssfirebug

Converting XPath into CSS

I really need your assistance in converting XPath to CSS. I have this code snippet and XPath expression: /descendant::p/parent::*/child::p[position()=1] ... The selected elements will be (B D F H) <?xml version="1.0" ?> <book> <title&g ...

cssxpathcss-selectors

How to Align Video Alongside Image in HTML without Using CSS

Is there a way to place a video on the left and an image on the right of the same line in HTML without relying on CSS? ...

htmlcssalignment

Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...

jquerycssunslider

Is there a way I can finish animating these divs in a diagonal motion?

I successfully made the blue and red divs move diagonally and switch positions. Now I am looking to achieve the same effect with the green and pink divs using a similar function. I am unsure about setting the position of both divs to 0 and 350 for those p ...

javascripthtmlcss

Rgd: Double-Sided Horizontal Slide Control

While browsing the internet, I came across several examples of horizontal sliders with adjustable values. For example, if I set the maximum value as 100 and move the slider 10 sectors to the left, each sector would decrease by 10. What I am trying to ach ...

javascriptjqueryhtmlcss

show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...

htmlcss

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

Can you please elaborate on how the CSS properties: -webkit-border-radius and border-radius are utilized?

https://i.sstatic.net/ILDTb.png What is the reason for having different values of 25px for -webkit-border-radius and border-radius in various positions? table.cal{ color: #064525c; border-spacing: 0; border: 3px solid black; -webkit-bor ...

css

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

cssangulartypescriptsass

Centering the scroll bar with Flexbox

Is it possible to center the scroll bar of a flex box in the middle of the screen? Currently, when using the code below I am seeing the UI as shown below, with the scroll bar at the bottom of the container DIV https://i.sstatic.net/XakpC.png Instead, is ...

htmlcssmudblazor

Strange gray gradient background suddenly showing up on mobile devices

Encountering an issue with a login form displayed on a sliding modal. The design looks correct on desktop and even in responsive mode with dev tools, but when accessed through mobile Chrome or Safari on an iPhone, an unusual gray rounded box or shadow appe ...

cssreactjstailwind-css

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. https://i.sstatic.net/3oaPl.jpg <table class="table-mai ...

phphtmlcss

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

javascriptjqueryhtmlcss

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

It seems that the w-11/12 class is not behaving as expected. According to the documentation, it should give a width of 91.666% but instead, it's filling up 100%. This issue only occurs with the value 11, while other values work fine. Has anyone else e ...

cssreactjstailwind-css

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

htmlcss

Building an HTML Form for Requests

Having some trouble creating an HTML form, particularly with resizing the Fieldset and legend elements. As a novice programmer, I am practicing building HTML forms. My goal is to have the form adjust its size based on the window without displacing the cont ...

htmlcssformshtml-table

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

javascriptjquerycss