flex setting items below each other

Question

i'm trying to get to the layout from middle to left as shown in the picture. How can i make the grey div to push itself up using flex? Should i just use fixed position for it? Thought about changing the html to create container div for the orange and grey boxes, but I want to see how to do it without changing the html.

example picture

@import 'general.css';
@import 'reg.css';

@import "768.css"  screen and (min-width : 992px);
@import "992.css"  screen and (min-width : 1200px);
/*general*/
body, html{
    margin: 0;
    padding:0;
  height: 100%;
}
* {
    box-sizing: border-box;
}
/*reg*/
.container{
    background-color: red;
    text-align: center;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
}
.box{
    height: 10%;
    width: 100%;

}

header{
    background-color: black;
    color: white; 
    width: 100%;
    order:1;
}
footer{
    background-color: navy;
    color: white;
    width: 100%;
    order:5;
}
.main-content{
    background-color: dodgerblue;
    height: 60%;
    width: 100%;
    order:2;
}
.grey{
    background-color: grey;
    order:4;
}
.orange{
    background-color: orangered;
    order:3;
}

/*768*/
.box{
    height: 11%;
}
.main-content{
height: 67%;
}
.grey{
    width: 30%;
    order:3;  
}
.orange{
    background-color: orangered;
    width: 70%;
    order:4;
} 

/*992*/

.main-content{
    width: 85%;
    order:3;
    align-self: flex-end;
    height: 80%;
}
.grey{
    width: 15%;
    order:4;
    align-self: flex-start;
    height:20% ;
}
.orange{
    width:15%;
    order:2;
    align-self: flex-start;
    height: 60%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>
<div class="container">
    <header class="box">this is the header</header>
    <div class="main-content box">this is main content</div>
    <div class="orange box">this is the orange</div>
    <div class="grey box">this is the grey</div>
    <footer class="box">this is the footer</footer>
</div>
</body>

</html>

arkhi · Answer 1 · 2018-10-06T17:34:30.137

I don’t see any solution only using flex because boxes will flow in lines. So as you mentioned, using a positioning for the grey box would be the only way to achieve this.

This is a solution using grid though:

body, html {
    height: 100%;
    padding:0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e";
    grid-template-rows: 1fr 60% 1fr 1fr 1fr;
    height: 100%;
    background-color: red;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    grid-area: a;
    color: white;
    background-color: black;
}

.main-content {
    grid-area: b;
    background-color: dodgerblue;
}

.orange {
    grid-area: c;
    order: 4;
    background-color: orangered;
}

.grey {
    grid-area: d;
    background-color: grey;
}

footer {
    grid-area: e;
    color: white;
    background-color: navy;
}

@media ( min-width: 768px ) {
    .container {
        grid-template-areas:
            "a a"
            "b b"
            "d c"
            "e e";
        grid-template-rows: 15% 4fr 1fr 15%;
        grid-template-columns: 15% 1fr;
}

@media ( min-width: 992px ) {
    .container {
        grid-template-areas:
            "a a"
            "c b"
            "d b"
            "e e";
        grid-template-rows: 15% 4fr 1fr 15%;
        grid-template-columns: 15% 1fr;
    }
}

<div class="container">
    <header class="box">this is the header</header>
    <div class="box main-content">this is main content</div>
    <div class="box orange">this is the orange</div>
    <div class="box grey">this is the grey</div>
    <footer class="box">this is the footer</footer>
</div>

score 1 · Answer 2 · answered Oct 06 '18 at 19:26

You can use the order style of flex children to affect what order they are rendered inside of a flex parent, however this does require some wrapping divs so you'd have to change your HTML slightly, otherwise you must use CSS grid. Snippet with working example of your images below:

:root {
 --min-height: 80px;
}

* {
 border-sizing: border-box;
 padding: 0;
 margin: 0;
}

html, body, .container {
 height: 100%;
}

body {
 padding: 10px;
}

div {
 border-radius: 10px;
}

.container {
 display: flex;
 flex-direction: column;
}

.container > div {
 margin-bottom: 10px;
}

.container > div:last-child {
 margin: 0;
}

.main-content > div {
 margin-bottom: 10px;
}

.main-content > div:last-child {
 margin: 0;
}

.side-content > div {
 margin-bottom: 10px;
}

.side-content > div:last-child {
 margin: 0;
}

.header, .footer, .content {
 min-height: var(--min-height);
}

.teal.content {
 min-height: calc(5 * var(--min-height));
}

.black {
 background: rgb(30, 32, 42);
}

.teal {
 background: rgb(74, 161, 162);
}

.orange {
 background: rgb(253, 170, 82);
}

.gray {
 background: rgb(203, 187, 172);
}

.navy {
 background: rgb(61, 94, 109);
}

@media screen and (min-width: 768px) {
 .side-content {
  display: flex;
  flex-direction: row;
 }
 .side-content > div {
  margin: 0;
 }
 .side-content > div:last-child {
  margin-right: 10px;
 }
 .orange {
  flex: 2 0 auto;
  order: 1;
 }
 .gray {
  flex: 1 0 auto;
  order: 0;
 }
}

@media screen and (min-width: 992px) {
 .main-content {
  display: flex;
  flex-direction: row;
 }
 .main-content > div {
  margin: 0;
 }
 .main-content > div:last-child {
  margin-right: 10px;
 }
 .side-content {
  order: 0;
  flex: 1 0 auto;
  flex-direction: column;
  margin-right: 10px;
 }
 .side-content > div:last-child {
  margin: 0;
 }
 .side-content > div:first-child {
  margin-bottom: 10px;
 }
 .orange {
  order: 0;
  margin-bottom: 10px;
 }
 .teal {
  order: 1;
  flex: 7 0 auto;
 }
}

<div class="container">
 <div class="black header"></div>
  <div class="main-content">
   <div class="teal content"></div>
   <div class="side-content">
    <div class="orange content"></div>
    <div class="gray content"></div>
   </div>
  </div>
 <div class="navy footer"></div>
</div>

flex setting items below each other

2 Answers2