I am trying to learn how to work with flexboxes. I have made an example here:
/* Grid */
.column {
flex-basis: 100%;
}
@media screen and (min-width: 800px) {
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.column {
flex: 1;
}
}
/* Style */
body {
font-family: 'Lato', sans-serif;
font-size: 1.3em;
color: #ccc;
background: #000;
margin-bottom: 70px;
}
.column {
padding: 15px;
border: 1px solid #666;
margin: 5px 0;
background: #343436;
}
main {
max-width: 1200px;
margin: 0 auto;
}<div class="row"><div class="column">
Column 1 - 100% </div></div><div class="row"><div class="column">
Column 2 - 50%</div><div class="column">
Column 3 - 50%</div></div><div class="row"><div class="column">
Column 4 - 33.3%</div><div class="column">
Column 5 - 33.3%</div><div class="column">
Column 6 - 33.3%</div></div>So the flexboxes above is working how I would like > 800px. Below I made an image of how I would like the grid to look, when the screensize is < 800px. But I cannot figure out how I make this in CSS?. I was hoping someone could learn me a good way to do this.
At the moment the flexboxes are just gonna take full-width on mobile, and I would like to have more control over the layout on mobile, so the layout is looking like this on < 800px:
