CODEWITHSUNDEEP
htmlcssflexbox
tynn
tynn

Reputation: 39843

Change layout direction of flexed boxes reliably

I'm trying to achieve the following layout changes with css3 only. My main problem here is, that I don't want to add sizes explicitly. I'd prefer to let the layout flow freely. I'm using the css flexbox. And after an automatic wrap the layout direction of the small items should change.

enter image description here enter image description here

I made this behavior almost work with @media(orientation: portrait). But then I still have restrictions on the size of the red box. You find that there's a third state with the yellow items being 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 not that all sizes are purely superficial.

I was wondering if it's possible to force the item box to wrap when the landscape mode is active. Or maybe have a selector for the red box filling the complete horizontal viewport.

Upvotes: 2

Views: 91

Answers (1)

repzero
repzero

Reputation: 8412

you can use a display:block on the div with id body and add this in your media rule

@media(orientation: portrait) {
#wrap { display: flex; flex-wrap: wrap; justify-content: flex-end;border:solid red;}
#body{display:block;}
}

fiddle here with resizable window else

snippet

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
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;border:solid green; }
#break{}
@media(orientation: portrait) {
#wrap { display: flex; flex-wrap: wrap; justify-content: flex-end;border:solid red;}
#body{display:block;}
}
</style>
<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>

Upvotes: 1

Related Questions