I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layout direction of the smaller items to change.
https://i.sstatic.net/DB5H9.png https://i.sstatic.net/1n60P.png
I've almost achieved this behavior by incorporating @media(orientation: portrait). However, I still face size restrictions on the red box. There is also a third state where the yellow items should be displayed horizontally next to the red box.
div {
min-width: 50px;
min-height: 50px;
margin: 8px;
justify-content: flex-end;
}
#body {
background: lightgray;
padding: 8px;
display: flex;
flex-wrap: wrap;
}
#box {
background: lightpink;
min-width: 150px;
height: 220px;
flex-grow: 1;
}
.item {
background: lightyellow;
}
#wrap {
margin: 0;
}
@media(orientation: portrait) {
#wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}<title>Example</title>
<div id="body">
<div id="box"></div>
<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>Please note that all sizes are purely cosmetic.
I am curious if it's achievable to have the item box automatically wrap when in landscape mode. Alternatively, is there a way to style the red box to fill the entire horizontal viewport?