I'm trying to learn Flexbox and I'm stuck with a layout I want to create.
On mobile I have the following layout:
Is it possible to get the following layout on desktop?
The code:
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
border: 1px solid grey;
}
@media all and (min-width: 600px) {
.wrapper > article {
flex: 3 66%;
}
.wrapper > aside {
flex: 1 33%;
}
}
/* rest of styling */
* {
box-sizing: border-box;
}
h1 {
color: #FFF;
font-size: 16px;
font-family: sans-serif;
text-align: center;
}
article {
height: 100px;
}
aside {
height: 62px;
}
.article1 {
background-color: Crimson;
}
.article2 {
background-color: DarkCyan;
}
aside {
background-color: DimGray;
}
header {
background-color: gold;
}
<div class="wrapper">
<header>
<h1>header</h1>
</header>
<article class="article1">
<h1>Article 1</h1>
</article>
<aside class="aside1">
<h1>aside 1</h1>
</aside>
<article class="article2">
<h1>Article 2</h1>
</article>
<aside class="aside2">
<h1>aside 2</h1>
</aside>
</div>
See Question&Answers more detail:os