Exploring the world of Flexbox, I'm not entirely convinced it's the right solution for my layout challenges. Here's what I have in mind:
In a 940px wide space, I need to create three columns with fixed widths of 300px each. However, on medium to large screens, the first row should consist of two columns - one spanning 600px and the other 300px, which contains two stacked divs. On smaller screens, the 600px div should take full width while the 300px divs reflow horizontally on the following row. Finally, on the smallest screens, all divs should stack vertically.
I'm hesitant to resort to floats due to the complexity they introduce, conflicting with reusable CSS classes preferred for JavaScript functionality by other developers. Therefore, I am exploring whether flexbox can offer a responsive solution using repeatable classes for the divs. See below for what I have built so far:
HTML
<div class="container">
<div class="content">
<div class="row">
<div class="flex-container">
<div class="flex-item flex-item--1">1</div>
<div class="flex-container-inner">
<div class="flex-item flex-item--2">2</div>
<div class="flex-item flex-item--3">3</div>
</div>
</div>
</div>
<div class="row">
<div class="flex-container">
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
</div>
</div>
</div>
CSS
.container {
width: 960px;
margin: 0 auto;
}
.content {
width: 940px;
margin-left: 10px;
margin-right: 10px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: #abc;
width: 300px;
height: 150px;
margin-top: 20px;
color: blue;
font-size: 2em;
}
.flex-item--1 {
width: 600px;
margin-left: 0;
}
.flex-item--2 {
height: 75px;
}
.flex-item--3 {
height: 55px;
}
@media screen and (min-width: 320px) and (max-width: 767px)
{
}
@media screen and (min-width: 768px) and (max-width: 959px) {
.flex-item--1 {
flex: 2 0px;
}
.flex-item--2 {
order: 1;
}
.flex-item--1 {
order: 2;
}
.flex-item--3 {
order: 3;
}
}
@media screen and (min-width: 959px) and (max-width: 1023px) {}
@media screen and (min-width: 1024px) {}
This is how I envision the layout between 768px and 959px: https://i.sstatic.net/dimWL.png
UPDATE
Provided are different layouts at various screen sizes. Despite initial beliefs that Flexbox would handle this responsively with ease, adding more divs does not result in seamless reflowing. Perhaps numerous media queries will be necessary to target these divs accurately for optimal responsiveness as illustrated in the image below: https://i.sstatic.net/9vix1.png