I'm trying to create a layout using the Flex structure. This is exactly the main image I wanted it to be.
This layout will also be compatible with the mobile view.
1- My Sidebar component doesn't stick to the bottom of my hero component. I used "margin-top: -200px;" for this problem. but I don't want that.
2- Between my components, I want to use margin as pictured. But because I calculate the size of each component as a percentage of "%" and they completely cover the page, if I give margin, they become wrap. What's the right way for me to do this ?
3- Do you think the flexbox settings I have applied are correct ? What would be better for me to change ?
Thank you in advance for your help.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.hero {
flex: 1 0 40%;
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
margin-top: -200px;
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
;
<!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">
<link rel="stylesheet" href="src/css/test.css">
<title> Flexbox Layout</title>
</head>
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="hero">
<h2>hero</h2>
</div>
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
</html>
I think you can still use flex. Just you have to wrap both components left and right with div.
left = > hero and side nav
right = > main content and extra content
I just add 2 div. Look below the code.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.left{
width: 40%;
}
.right {
width: 60%;
}
.hero {
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="left">
<div class="hero">
<h2>hero</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
</div>
<div class="right">
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
There can be 2 grids here , one with the header the contents and the footer, and then another grid inside the content area.
Here is a possibility to start from for such a layout with grid where a break point can turn the second grid into a flex column layout with a mediaquerie (set at 500px for the demo):
body {
/* first grid of 3 rows , flex can do it too */
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
body main {
/* second grid for the contents in between header and footer */
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 5px 0;
grid-gap: 5px;
}
header {
background: #74d3e8;
}
/* set each element inside cell(s) of the grid */
.main {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
background: #f0c354;
}
.hero {
grid-column: 1;
grid-row: 1;
background: #d4cbe0;
}
.sidebar {
grid-column: 1;
grid-row: 2 / span 2;
background: #a7be6d;
}
.extra {
grid-column: 2 / span 2;
grid-row: 3;
background: #898989;
}
.relI {
grid-column: 1 / span 2;
grid-row: 4;
background: #58b076;
}
.relP {
grid-column: 3;
grid-row: 4;
background: #edd0de;
}
footer {
background: #f4a540;
}
/* set here your break point */
#media screen and (max-width: 500px) {
body main {
display: flex;
flex-flow: column;
}
.main {
flex: 1;
}
/* from you can use order to reset order of the boxes in main */
}
<header>header</header>
<main>
<article class="main">Main content</article>
<section class="hero">hero</section>
<aside class="sidebar">Sidebar</aside>
<section class="extra">Extra content</section>
<aside class="relI">Related images</aside>
<aside class="relP">Related post</aside>
</main>
<footer>Footer</footer>
Usefull ressource to go further : https://gridbyexample.com/ */ https://css-tricks.com/snippets/css/complete-guide-grid/
here is a demo to play with : https://codepen.io/gc-nomade/pen/jObgNOO
Related
Try to make this:
Article and Aside are the same width
I don't know if the floating is wrong, or other. even I make the margin to 0, the Article box will drop below to Aside. And I don't why after I float the box, some of the borderlines will overlap but the footer won't. And there are some requirements.
The border is 3px.
The height of each box is 200px. Article and Aside are the same width
header,main,aside,article,footer{
background-color: lightblue;
border: 3px solid red;
height: 200px;
margin: 0;
}
header {
}
main {
width: 60%;
float: left;
}
aside{
width: 20%;
float: left;
}
article {
width: 20%;
float: right;
}
footer{
clear: both;
}
<header>
<h2>Header</h2>
</header >
<main>
<h2>Main</h2>
</main>
<aside>
<h2>Aside</h2>
</aside>
<article>
<h2>Article</h2>
</article>
<footer>
<h2>Footer</h2>
</footer>
A way is using grid:
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
.container div {
background-color: green;
border: solid red 1px;
}
.header {
grid-column: 1 / 6;
}
.main {
grid-column: 1 / 4;
}
.asid {
grid-column: 4 / 5;
}
.article {
grid-column: 5 / 6;
}
.footer {
grid-column: 1 / 6;
}
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="asid">asid</div>
<div class="article">article</div>
<div class="footer">footer</div>
</div>
I would wrap the .main, .aside, .article blocks with a flex container.
.content {
display: flex;
gap: 10px;
}
.content {
display: flex;
gap: 10px;
}
.header,.main,.aside,.article,.footer{
background-color: lightblue;
border: 3px solid red;
height: 200px;
margin: 1em;
}
.main {
width: 60%;
}
.aside {
width: 20%;
}
.article {
width: 20%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="content">
<div class="main">MAIN</div>
<div class="aside">ASIDE</div>
<div class="article">ARTICLE</div>
</div>
<div class="footer">FOOTER</div>
</div>
Try using flex
section{
display: flex;
}
main, aside, article{
height: 60px;
}
main{
flex-grow: 3;
background: red;
}
aside{
flex-grow: 1;
background: green;
}
article{
flex-grow: 1;
background: blue;
}
<section>
<main>main</main>
<aside>aside</aside>
<article>article</article>
</section>
I am trying to create a responsive navigation bar, similar to the one on Stack Overflow. I have attached an image of the layout I'm trying to achieve.
For simplicity, I added some values to make it easier to follow. There is the outer div that encapsulates the whole page, outer-wrapper and the main div that encapsulates the main content (navigation bar, main content, and footer), main-wrapper.
Now suppose that outer-wrapper is 1000px wide and main-wrapper is 800px wide, then there is 100px of buffer on the left and right side. When the window shrinks, I want the buffer to be used up before any of the main content changes.
CSS
.outer-wrapper {
width: 100%;
}
.main-wrapper {
width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav-home {
position: fixed;
top: -30px;
left: -30px;
height: 60px;
width: 100%;
padding: 20px 20px 0px 20px;
display: flex;
justify-content: space-around;
}
}
HTML
<div class='outer-wrapper'>
<div class='main-wrapper'>
<div class='nav-bar'>...</div>
<div class='main-content'>...</div>
<div class='footer'>...</div>
</div>
</div>
The problem is when the window shrinks to match the width of main-wrapper at 800px, there is still a left and right margin in the navigation bar. How would I ensure the width of the navigation bar matches the width of the main content and footer when the left and right margin is shrunk to 0?
Thanks.
I stripped out some of your styles from the .nav-bar class and it seems to be performing as you require - am I missing something?
I've added colours to help visualise the resizing.
.outer-wrapper {
background-color: yellow;
width: 100%;
}
.main-wrapper {
background-color: blue;
width: 800px;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav-bar {
background-color: red;
justify-content: space-around;
}
.main-content {
background-color: green;
}
.footer {
background-color: purple;
}
<div class='outer-wrapper'>
<div class='main-wrapper'>
<div class='nav-bar'>Nav Bar</div>
<div class='main-content'>Main Content</div>
<div class='footer'>Footer</div>
</div>
</div>
.outer-wrapper {
width: 100%;
}
.main-wrapper {
width: 800px;
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.main-wrapper > * {
padding: 10px;
flex: 1 100%;
}
.nav-bar {
background: tomato;
}
.footer {
background: lightgreen;
}
.main-content {
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
#media all and (min-width: 600px) {
.aside {
flex: 1 0 0;
}
}
#media all and (min-width: 800px) {
.main-content {
flex: 3 0px;
}
.aside-1 {
order: 1;
}
.main-content {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}
<div class="outer-wrapper">
<div class="main-wrapper">
<nav class="nav-bar">Navbar</nav>
<main class="main-content">content</main>
<aside class="aside aside-1">aside 1</aside>
<aside class="aside aside-2">aside 2</aside>
<footer class="footer">footer</footer>
</div>
</div>
this is the code that I made, hopefully it will help you and what you expect
I have what seems to be a fairly common problem with my CSS, however - I've been searching Stack and others with no answer in sight. Essentially, my container div is not expanding with it's children. I do have Bootstrap 4 installed, however it's use is very limited.
The problem is, all of the CSS is basic. It's a Flexbox three column layout, with a header and footer, inside a container:
<div class="ui-login" *ngIf="showLoginWindow">
<div class="header">
<img src="./../../assets/Logo.png" class="gameLogo">
</div>
<div class="h-body">
<nav class="h-col">…</nav>
<main class="h-content">…</main>
<aside class="h-col">…</aside>
</div>
<div class="footer">
<div class="about">
<b>About Text</b> <br>
About Test LLC - 2020
</div>
</div>
</div>
The layout is basic, as is the CSS itself:
.ui-login {
display: inline-block;
z-index: 200;
border: #34495e solid 2px;
background: #FFF;
.h-body {
display: flex;
flex: 1;
}
/* Style the header */
.header {
flex: 0 0 100%;
text-align: center;
font-size: 35px;
}
.h-content {
flex: 1;
}
.h-col {
/* 12em is the width of the columns */
flex: 0 0 12em;
background: #34495e;
}
/* Style the footer */
.footer {
padding: 10px;
text-align: center;
}
.h-body :nth-child(1) { order: 1; }
.h-body :nth-child(2) { order: 2; }
.h-body :nth-child(3) { order: 3; }
}
There is no applied width, height, padding, or margin, and the parent ui-login is also a display: inline-block. None of this seems to be fixing the overflow, when I need the parent to fully contain the layout children. What am I doing wrong?
.ui-login {
display: inline-block;
z-index: 200;
border: #34495e solid 2px;
background: #FFF;
.h-body {
display: flex;
flex: 1;
}
/* Style the header */
.header {
flex: 0 0 100%;
text-align: center;
font-size: 35px;
}
.h-content {
flex: 1;
}
.h-col {
/* 12em is the width of the columns */
flex: 0 0 12em;
background: #34495e;
}
/* Style the footer */
.footer {
padding: 10px;
text-align: center;
}
.h-body :nth-child(1) { order: 1; }
.h-body :nth-child(2) { order: 2; }
.h-body :nth-child(3) { order: 3; }
}
<div class="ui-login" *ngIf="showLoginWindow">
<div class="header">
<img src="data:image/jpeg;base64,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" class="gameLogo">
</div>
<div class="h-body">
<nav class="h-col">…</nav>
<main class="h-content">…</main>
<aside class="h-col">…</aside>
</div>
<div class="footer">
<div class="about">
<b>About Text</b> <br>
About Test LLC - 2020
</div>
</div>
</div>
I need to create a web page that uses 100vh, or takes up 100% of the screen height and width (no scroll). I created a container(height:100vh) that holds everything in it, and within that container, I need everything in there to be responsive.
Design concept:
The outer container height is 100vh and I need the inner container to be responsive:
#root {
position: relative;
height: 100vh;
overflow: hidden;
}
#root-inner-container {
width: 100%;
}
The problem I run into is by using 100vh, the content inside the container does not stay responsive and tends to overflow.
Jsfiddle to what I have so far: https://jsfiddle.net/fm6hmgpk/
Flex Solution
body {
margin: 0;
color: white;
}
.container {
background: grey;
width: 100vw;
height: 100vh;
}
.navbar {
height: 15vh;
background: darkblue;
margin: 0 10px;
}
.bottom {
background: lightgrey;
height: 85vh;
margin: 0 10px;
display: flex;
}
.left-bottom {
background: red;
width: 70%;
display: flex;
flex-direction: column;
}
.right-bottom {
flex: 1;
background: lightgrey;
}
.content-list {
display: flex;
height: 80%;
background: maroon;
}
.text {
flex: 1;
background: green;
}
.content {
width: 80%;
background: orange;
}
.list {
flex: 1;
}
<div class="container">
<div class="navbar">
NAVBAR
</div>
<div class="bottom">
<div class="left-bottom">
<div class="content-list">
<div class="content">
CONTENT
</div>
<div class="list">
LIST
</div>
</div>
<div class="text">
TEXT
</div>
</div>
<div class="right-bottom">
IMAGE
</div>
</div>
</div>
Calculation: (For scrolling issue)
<body> default margin:8px; and your border:2px solid black;
Sums up to 10px so we need to deduct twice of 10px
Hence height: calc(100vh - 20px);
EDIT:
To make it responsive you need to get rid of fixed px value to your li
li {}
#root {
display: flex;
position: relative;
height: calc(100vh - 20px);
border: 2px solid black;
}
#root-inner-container {
flex: 1;
width: 100%;
display: flex;
}
.app-container {
flex: 1;
display: flex;
}
.div-1,
.div-2 {
flex: 1;
display: flex;
}
ul {
flex: 1;
display: flex;
flex-direction: column;
}
li {
flex: 1;
border: 1px solid red;
}
<div id="root">
<div id="root-inner-container">
<div class="app-container">
<div class="div-1">
<ul>
<li>div 1 - One</li>
<li>div 1 - Two</li>
<li>div 1 - Three</li>
<li>div 1 -Four</li>
</ul>
</div>
<div class="div-2">
<ul>
<li>div 2 - One</li>
<li>div 2 - Two</li>
<li>div 2 - Three</li>
<li>div 2 -Four</li>
</ul>
</div>
</div>
</div>
</div>
You may want to consider using grid. For browser support you can check here.
To learn about using grid, check here.
body {
margin: 0
}
#root {
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr 3fr;
grid-template-rows: 1fr 3fr 1fr;
background-color: #fff;
color: #444;
width: 100vw;
height: 100vh;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.navbar {
grid-column: 1 / 4;
grid-row: 1;
}
.content {
grid-column: 1;
grid-row: 2 / 3;
}
.list {
grid-column: 2;
grid-row: 2;
}
.image {
grid-column: 3 / 4;
grid-row: 2 / 4;
}
.text {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
<div id="root">
<div class="navbar box">Navbar</div>
<div class="content box">Content</div>
<div class="list box">List</div>
<div class="image box">Image</div>
<div class="text box">Text</div>
</div>
I think it's because your li height is fixed height so if your root height is less than the sum of those li height it will overflow. you can use vh for them too.
I have looked into Flexbox to achieve a responsive layout like pictured below. Unfortunately I still have not figured out how to achieve a desktop layout like Figure 1 which rearranges itself to Figure 2 on viewports smaller than 414 pixel.
Figure 1 (desktop viewports)
Figure 2 (mobile viewports)
(scaled version)
Click here for image in original size
My code so far :
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0;
flex-direction: row;
}
.content-flexbox.one {
flex-basis: calc(66% - 1rem);
order: 2;
}
.content-flexbox.two {
flex-basis: calc(30% - 1rem);
order: 1;
}
.content-flexbox.three {
order: 3;
}
.content-flexbox.four {
order: 4;
}
.content-flexbox {
margin: 1rem;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media only screen and (max-width: 959px) {
.flexbox {
-flex-direction: column;
padding-top: 1rem;
}
.content-flexbox {
margin: 1rem;
flex: 1;
flex-basis: 100%;
}
.content-flexbox.one {
flex-basis: 100%;
order: 1;
}
.content-flexbox.two {
flex-basis: 100%;
order: 2;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
</div>
My question
Is this even possible with flexbox? Is there a better alternative more suited for this layout?
You’re looking for the experimental grid syntax. Flexbox is good for smaller, widget or component layout systems. Grid is for overall page layout, and it’s awesome.
Thing is, grid is only supported in IE, Edge, and the upcoming Safari browsers right now, but Firefox and Chrome support is allegedly just around the corner, and you can start trying it out today by enabling the right developer flag in those browsers.
Here is some sample code, but again, it will only work if your browser supports the new grid syntax.
*{
box-sizing: border-box;
}
.flexbox{
width: 320px;
display: grid;
grid-template-columns: calc(50% - 0.5ch) calc(50% - 0.5ch);
grid-gap: 1ch;
}
.one{
order: 2;
background-color: red;
}
.two{
grid-column: 1 / 3;
order: 1;
background-color: green;
}
.three{
order: 3;
background-color: pink;
}
.four{
display: grid;
grid-column: 1 / 3;
grid-gap: 1ch;
order: 4;
background-color: lavender;
}
.inner-container{
background-color: violet;
}
#media screen and (min-width: 500px){
.flexbox{
width: 500px;
grid-template-columns: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);
}
.one{
grid-row: 1 / 3;
order: 1;
}
.two{
order: 2;
grid-column: 2 / 4;
}
.three{
order: 3;
}
.four{
grid-column: 3 / 4;
order: 4;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
Although this question explicitly asked for a flexbox approach, there is another way to achive it using simple floats.
A media query allows to rearange the elements in the desired order on viewports less than 414px wide:
.wrap {
background: #d0d0d0;
padding: 1%;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.el {
float: left;
margin: 1%;
}
.el1 {
width: 31.33%;
padding-bottom: 31.33%;
background: #FF7676;
}
.el2 {
float: right;
width: 64.66%;
padding-bottom: 14.66%;
background: #C2FF76;
}
.el3 {
width: 31.33%;
padding-bottom: 14.66%;
background: #FF9BF7;
}
.el4 {
width: 31.33%;
padding-bottom: 6.33%;
background: #9BA4FF;
}
#media (max-width: 414px) {
.el2, .el4 {
width: 98%;
padding-bottom: 31.33%;
}
.el1, .el3 {
width: 48%;
padding-bottom: 48%;
}
}
<div class="wrap">
<div class="el el2"></div>
<div class="el el1"></div>
<div class="el el3"></div>
<div class="el el4"></div>
<div class="el el4"></div>
</div>
Note that I used padding-bottom to keep the aspect ratio of the elements in this example (more info in this answer).
I don't know what content you intend to put in the blocks but you will need to use absolute positionnig for it if you want to stick with the "padding technique". For plain text content, you can check this fiddle.
The problem is that, if you want to be able to rearrange all items, they must be flex items of the same flex container. But Flexbox does not provide any direct way to make an element occupy more than one flex line.
However, you can use multiple containers and display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
/* Desktop */
.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
flex-grow: 1;
}
.item {
margin: 2px;
}
.column {
flex-direction: column;
}
.fill {
width: 100%;
}
/* Mobile */
#media (max-width: 414px) {
.container > .container {
display: contents;
}
.i2 {
order: -1;
}
.i4 {
width: 100%;
}
}
/* Pretty */
.i1 { background: #FF7676; }
.i2 { background: #C2FF76; }
.i3 { background: #FF9BF7; }
.i4 { background: #9BA4FF; }
<div class="container">
<div class="item i1">1</div>
<div class="container">
<div class="item i2 fill">2</div>
<div class="item i3">3</div>
<div class="container column">
<div class="item i4">4a</div>
<div class="item i4">4b</div>
</div>
</div>
</div>
The only problem is that display: contents is not widely supported yet, but you can see it working on Firefox.
I don't think this is possible to do with pure css, but you could use some js and change html structure on resize with wrapAll() and unwrap(). You also need to use media queries to change order and some css when window is < 414px.
$(window).on("resize", function() {
var windowW = $(window).width();
if (windowW < 414) {
if ($('.right, right-inner').length) $('.two, .four').unwrap();
if (!$('.top').length) $('.one, .two, .three').wrapAll('<div class="top"></div>');
} else {
if ($('.top').length) $('.one, .two, .three').unwrap();
if (!$('.right, .right-inner').length) {
$('.three, .four').wrapAll('<div class="right-inner"></div>');
$('.two, .right-inner').wrapAll('<div class="right"></div>');
}
}
}).resize();
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.flexbox {
display: flex;
min-height: 100vh;
color: white;
font-size: 50px;
}
.one {
flex: 1;
background: #FF7676;
margin: 10px;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
margin: 10px;
}
.two {
height: 40%;
display: flex;
margin-bottom: 20px;
margin-right: 10px;
}
.two img {
width: 100%;
margin: 0;
}
.right-inner {
display: flex;
flex: 2;
}
.three,
.four {
flex: 1;
}
.three {
background: #FF9BF7;
margin-right: 10px;
}
.four {
display: flex;
flex-direction: column;
}
.set,
.get {
background: #9BA4FF;
flex: 1;
margin: 5px;
}
.set {
margin-top: 0;
}
.get {
margin-bottom: 0;
}
#media(max-width: 414px) {
.flexbox {
flex-direction: column;
}
.flexbox > * {
flex: 1;
margin: 10px;
}
.get,
.set {
margin: 0;
margin-bottom: 10px;
}
.two {
order: -1;
flex: 0 0 100%;
margin-bottom: 0;
}
.two img {
height: 100px;
}
.one,
.three {
width: 50%;
margin: 0;
}
.one {
margin-right: 10px;
}
.top {
display: flex;
flex-wrap: wrap;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="flexbox">
<div class="content-flexbox one">
<span class="posttitle">1</span>
</div>
<div class="right">
<div class="content-flexbox two">
<img src="http://placehold.it/300x300/C2FF76" />
</div>
<div class="right-inner">
<div class="content-flexbox three">
<span>3</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>4a</span>
</div>
<div class="inner-container get">
<span>4b</span>
</div>
</div>
</div>
</div>
</div>
I see that you can make two containers with floats and like mentioned before use liquid style page with width %. If you aproche mobile viewport use media querys to declair breakpoints.