I have this simple layout Everything is in Grid layout. Now Sidebar and Content are responsive among themselves or how to say it. I'd need set to Sidebar to fixed position but i need keep responsivity between Sidebar and Content.
.side-bar {
background: #1b1a1b;
backdrop-filter: blur(15px);
width: 100%;
height: 100vh;
overflow-y: auto;
transition: 0.6s ease;
transition-property: left;
}
#content {
margin-top: 100px;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
Grid is nothing such special.. Div2 = Sidebar, Div3 = Content
#grid {
display: grid;
grid-template-rows: 35.3% 1fr;
grid-template-columns: 16% 75.5% 8.5%;
gap: 0;
width: 100vw;
height: 100vh;
}
#div1 {
grid-area: 1 / 2 / 2 / 4;
}
#div2 {
grid-area: 1 / 1 / 3 / 2;
}
#div3 {
grid-area: 2 / 2 / 3 / 3;
}
#div4 {
grid-area: 2 / 3 / 3 / 4;
}
Related
I have 3 divs in 3 columns of a grid and I want the middle div to stay static when zoomed in. The one on the right and left growing with the zoom
HTML
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
CSS
.dvCenter{
background-color: black;
height: 110px;
align-items: center;
display: grid;
grid-template-columns: 40% 20% 40%;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}
I think what you want is to have the page start by having the .dvCenter2 div to have 20% width and then stays as the current width when the page grows. But % is a relative unit and when the screen grows bigger, the 20% is also bigger than the original 20%.
I can't think of a pure CSS way to do this but you can use javascript to query the current size of the container and modify the grid-template-column. Check the demo below. Hope this helps!
$(".dvCenter").css("grid-template-columns", "1fr " + $(".dvCenter2").width() + "px 1fr");
$("#btn").click(function() {
$(".dvCenter").toggleClass("enlarge");
});
.dvCenter{
background-color: black;
height: 110px;
width: 50%;
align-items: center;
display: grid;
grid-template-columns: 1fr 20% 1fr;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}
.enlarge {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
<button id="btn">Click to resize container</button>
Don't know if I am being dumb but I am trying to have a 2x2 grid of resizable items. I can get them all working but upon trying to set a max width for the item so it does not go off the screen it works but if you keep dragging it it ignores the max size of the grid. It holds at the max size I set for a few seconds but if I don't release the mouse it eventually goes outside the max size.
My CSS is as follows and the item in question is item 2.
.grid-container {
margin: 0px;
display: grid;
grid-template-columns: fit-content(90%) fit-content(90%) 1fr;
grid-template-rows: fit-content(8ch) fit-content(8ch) 1fr;
grid-gap: 10px;
background-color: #439cea;
padding: 10px;
width: 99%;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-area: 1 / 1 / span 1 / span 2;
min-width: 500px;
min-height: 400px;
}
.item2 {
box-sizing: border-box;
grid-area: 1 / 3 / span 1 / span 2;
max-height: fit-content;
overflow: auto;
height: 80px;
width: 100%;
max-width: 90%;
min-width: 50px;
overflow: auto;
resize: both;
}
.item3 {
grid-area: 2 / 1 / span 1 / span 2;
}
.item4 {
grid-area: 2 / 3 / span 1 / span 2;
max-width: 100%;
resize: both;
}
<div class="grid-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
If you want to not restrict the resizing of .resizable element, but only the parent, just using overflow: hidden; and max-width on the parent will prevent it from appearing to grow beyond restrictions. If you want to restrict the children from growing, the way I did this was to use css variable and calc on the root to determine the size of children. I also used box-sizing to account for the scroll bar height / width;
* {
box-sizing: border-box;
}
:root {
--container-max-width: 200px;
--resizable-max-width: calc(var(--container-max-width) / 2);
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: var(--container-max-width);
overflow: hidden;
}
.resizable {
max-width: var(--resizable-max-width);
border: 1px solid black;
resize: both;
overflow: scroll;
}
<div class="container">
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
<div class="resizable"></div>
</div>
I have 4 divs that I am using flexbox to align. At desktop size, there are 3 equal width columns with the first and last divs taking up the entire height of the container. The second and third divs stack vertically in the middle with each taking up 50% of the height. That's working fine.
At mobile size, I want the last div to be on top and to stretch the entire width of the container. Then I want the first div to align left underneath the top div and take up 50% of the width and the remaining height of the container.
The problem I'm having is I want the second and third div to align right under the top div and take up the remaining 50% of the width but to stack vertically so each takes up 50% of the remaining height.
I've tried changing the flex-direction in the media query and everything else I can think of but it's not working.
* {
margin: 0;
padding: 0;
}
.box-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 70vh;
align-items
}
.boxa {
background: red;
flex: 0 0 100%;
width: 33%;
}
.boxb {
background: orange;
}
.boxc {
background: lightgreen;
}
.boxb,
.boxc {
flex: 0 0 50%;
width: 33%;
}
.boxd {
background: grey;
flex: 0 0 100%;
width: 33%;
}
#media (max-width: 700px) {
.boxa {
order: 2;
width: 50%;
flex: 0 0 75%;
}
.boxb {
order: 3;
width: 50%;
flex: 0 0 37.5%;
}
.boxc {
order: 4;
width: 50%;
flex: 0 0 37.5%;
}
.boxd {
order: 1;
flex: 0 0 25%;
width: 100%;
}
}
<div class="box-wrapper">
<div class="boxa"></div>
<div class="boxb"></div>
<div class="boxc"></div>
<div class="boxd"></div>
</div>
The layout you want is difficult to achieve with flexbox because flexbox is not well-suited for 2-dimensional grids. It excels at 1-dimensional grids (placing flex items in rows or columns), but has limited capacity in 2-dimensional grids (placing flex items in rows and columns).
Being that your desired layout involves items having to cross row and column lines, flex is not your best option. With CSS Grid, your layout is simple and easy.
jsFiddle demo
.box-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal width columns */
grid-template-rows: 1fr 1fr; /* 2 equal height rows */
height: 70vh;
grid-column-gap: 5px;
grid-row-gap: 5px;
padding: 5px;
grid-template-areas: " first second last "
" first third last ";
}
.boxa { grid-area: first; background: red; }
.boxb { grid-area: second; background: orange; }
.boxc { grid-area: third; background: lightgreen; }
.boxd { grid-area: last; background: grey; }
#media ( max-width: 700px) {
.box-wrapper {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: " last last "
" first second "
" first third ";
}
}
* { margin: 0; padding: 0; }
/* for placing and styling numbers only */
.box-wrapper > div {
font-size: 1.5em; display: flex; align-items: center; justify-content: center; }
<div class="box-wrapper">
<div class="boxa">1</div>
<div class="boxb">2</div>
<div class="boxc">3</div>
<div class="boxd">4</div>
</div>
More information:
Is it possible for flex items to align tightly to the items above them?
I am trying to create three items inside of a nested grid item. As you can see from the code, I've put the 'panels' div in-between the 'jumbo' and 'content' divs. I also nested three divs inside. In the CSS, I added a nested grid inside of .panels.
I want the 'panels' div to be split in three equally size parts on the vertical axis. Imagine three square blocks stack one after another. But the nested items don't fill the entire 'panels' div. If you run the code snippet, you can see that the panels are nested but don't take up the entire space. They take up a small percentage of their parent. I added background-color: white !important to one of the nested panels to show how small it is.
Another example can be seen here: https://codepen.io/rachelandrew/pen/NqQPBR/
But again, the nested E, F and G items don't expand to fill up the entire D section.
Is there a way to make the three panels fill in their parent?
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">
CONTENT
</div>
<div class="footer">
FOOTER
</div>
</div>
You have align-items: center applied to the nested grid container (.panels).
With that rule, you override the default align-items: stretch, which would set your grid items to the full height of the parent. Instead, you have the items vertically centered.
So they can be full height, remove align-items: center from the .panels element:
.container > div:not(.panels) {
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Then, to vertically center the content of .panels, I would target the content directly:
.panels > div {
display: flex;
align-items: center;
}
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}
.header {
grid-column: 1 / -1;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panels {
grid-column: 3 / 9;
grid-row: 4 / 6;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.panel1 {
grid-row: 1 / 2;
grid-row: 1;
background-color: white !important;
z-index: 2;
}
.content {
grid-column: 1 / -1;
grid-row: 5 / 7;
}
.footer {
grid-column: 1 / -1;
}
/* Styling */
.container > div {
display: grid;
justify-content: center;
/* align-items: center; */
font-size: 2em;
color: #ffeead;
}
/* new */
.container > div:not(.panels) {
align-items: center;
}
/* new */
.panels > div {
display: flex;
align-items: center;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n) { background-color: #96ceb4; }
<div class="container">
<div class="header">HEADER</div>
<div class="jumbo">JUMBO</div>
<div class="panels">
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
Keep in mind that there are three structural levels in a grid container:
the container
the item (child of the container)
the content (child of the item)
Grid properties only work between parent and child.
So when you apply grid centering properties on the container, they apply to the item, not the content. To center the content, you need to treat the item as parent and content as child.
There's a more in-depth explanation of these concepts and methods here: Centering in CSS Grid
Well, what you have done is, you created three columns inside the 'panels' div:
grid-template-columns: repeat(3, 1fr);
But you gave the children only a position for the row (twice):
grid-row: 1 / 2;
grid-row: 1;
So if you change 'columns' to 'rows' in '.panels' and clean up the code for '.panel1' it should work like a cham!
Thank you all for your suggestions. I solved the issue by removing the nested 'panel' and simply creating three different panels to fill the same space.
.container {
display: grid;
width: 100%;
height: 100%;
grid-gap: 3px;
grid-template-columns: repeat(13, 1fr);
grid-template-rows: 50px 218px 218px 200px 80px 530px 40px;
}
.header {
grid-column: 1 / -1;
position: sticky;
top: 0;
z-index: 3;
}
.jumbo {
grid-column: 1 / -1;
grid-row: 2 / 5;
}
.panel1 {
background-color: white !important;
z-index: 1;
grid-column: 3 / 6;
grid-row: 4 / 6;
}
.panel2 {
background-color: black !important;
z-index: 1;
grid-column: 6 / 9;
grid-row: 4 / 6;
}
.panel3 {
background-color: purple !important;
z-index: 2;
grid-column: 9 / 12;
grid-row: 4 / 6;
}
.content-left {
grid-column: 1 / 5;
grid-row: 5 / 7;
}
.content-right {
grid-column: 5 / -1;
grid-row: 5 / 7;
display: grid;
grid-gap: 5px;
align-items: start;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr)
}
.content-right > div {
background-color: white;
z-index: 2;
}
.footer {
grid-column: 1 / -1;
}
.container > div {
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffeead;
}
html, body {
background-color: #ffeead;
box-sizing: border-box;
height: 100%;
margin: 0px;
font-family: "Work Sans"
}
.container > div:nth-child(1n) {
background-color: #96ceb4;
}
.container > div:nth-child(3n) {
background-color: #88d8b0;
}
.container > div:nth-child(2n) {
background-color: #ff6f69;
}
.container > div:nth-child(4n) {
background-color: #ffcc5c;
}
.panels > div:nth-child(1n) {
background-color: #96ceb4;
}
<div class="container">
<div class="header">
HEADER
</div>
<div class="jumbo">
JUMBO
</div>
<div class="panel1">PANEL1</div>
<div class="panel2">PANEL2</div>
<div class="panel3">PANEL3</div>
<div class="content-left">
CONTENT-LEFT
</div>
<div class="content-right">
<div class="content-right1">1</div>
<div class="content-right2">2</div>
<div class="content-right3">3</div>
<div class="content-right4">4</div>
<div class="content-right5">5</div>
<div class="content-right6">6</div>
</div>
<div class="footer">
FOOTER
</div>
</div>
I'm trying to take content that is laid out with desktop as the priority, and re-flow it for mobile based on that clients wishes, but I'm not able to completely get the elements to fit. Here's the layout on desktop:
+----+----+
| 1 | 2 |
| | |
+---------+
| 3 | 4 |
| | 5 |
+---------+
Elements 4 and 5 are in a wrapping div together because they're each half the height of element 3. Desktop is the priority, so it's be developed with that in mind. Here's what I want to accomplish for mobile:
+----+----+
| 1 |
| |
+---------+
| 4 | 2 |
| 5 | 3 |
+---------+
Using flexbox I've managed to get all the elements repositioned except 2. It just wraps to the next line.
I realize it's not ideal, but is there any way to get the 2nd element to line up under the 3rd to make a 1x2 grid?
Here's the code that I've gotten close with:
#wrapper { display: -webkit-flex; flex-wrap: wrap; align-content: stretch; }
#1 { order: 1; flex: 1 100%; }
#2 { order: 3; flex: 3 50%; }
#3 { order: 4; flex: 4 50%; }
#4&5wrapper { order: 2; flex: 2 50%; }
Is this even possible?
I believe the answer to your question is no. Here's why:
The desktop layout is not a problem with flexbox. You simply need to wrap boxes 4 and 5 in a nested column-direction flex container, and you're done.
.inner-container {
display: flex;
flex-direction: column;
order: 4;
flex: 0 1 calc(50% - 10px - 2px); /* width less margin less borders */
}
However, for the mobile layout, which requires boxes 2 and 3 to adjust from a row-based wrap in the outer flex container to a column-direction stack in an inner flex container (like with boxes 4 and 5), you would need to change the mark-up.
The best you can do (or at least I could do) without changing the mark-up is this:
Here's the code from the demos in case you're interested in playing with it:
HTML
<div class="outer-container">
<span class="box box1">1</span>
<span class="box box2">2</span>
<span class="box box3">3</span>
<div class="inner-container">
<span class="box box4">4</span>
<span class="box box5">5</span>
</div>
</div>
CSS (includes non-essential decorative styles)
body { display: flex; align-items: flex-start; }
.outer-container {
display: flex;
flex-wrap: wrap;
padding: 6px 0;
background-color: #f5f5f5;
border: 1px solid #ccc;
width: 250px;
box-sizing: border-box;
margin-right: 15px;
}
.box {
height: 100px;
width: 50px;
margin: 5px;
background-color: lightgreen;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
}
.inner-container {
display: flex;
flex-direction: column;
order: 4;
flex: 0 1 calc(50% - 10px - 2px); /* width less margin less borders */
}
.box1 { flex: 0 1 calc(50% - 10px - 2px); order: 1; }
.box2 { flex: 0 1 calc(50% - 10px - 2px); order: 2; }
.box3 { flex: 0 1 calc(50% - 10px - 2px); order: 3; }
.box4 { flex: 0 1 calc(50% - 10px - 2px); width: 100%; }
.box5 { flex: 0 1 calc(50% - 10px - 2px); width: 100%; }
div.outer-container:last-of-type > .box1 { flex: 0 1 calc(100% - 10px - 2px); order: 1;}
div.outer-container:last-of-type > .inner-container { order: 2; margin-right: 10px; }
div.outer-container:last-of-type > .box2 { order: 3; }
div.outer-container:last-of-type > .box3 { order: 4; flex: 1 1 100%; }
DEMO: http://jsfiddle.net/dLgjuyw6/1/ (Firefox)
EDIT: Just noticed that demo code (as pictured) works in FF but not Chrome. As this demo is solely for illustration purposes and non-essential to the answer I'm not pursuing browser compatibility.
I realise you've already accepted no as an answer but I'm not yet convinced.
I think the following solution answers the question. Note that I've chosen the flex-bases(?) so that their sum is 100% but you don't have to do that. That way there is some leeway to adjust to the content.
To see what happens watch the solution in full screen and make your browser window narrow (< 600 px). Or watch it on codepen.
#one {background: lightblue;}
#two {background: skyblue;}
#three {background: blue;}
#four {background: aqua;}
#five {background: lime;}
div {flex: 1;}
#wrapper {width: 100%; height: 95vh; border: 1px solid;}
#media (min-width:600px){
#wrapper {
display: flex;
flex-flow: column wrap;
padding: 0;
margin: 0;
}
div {width: 50%;}
#one{
order: 1;
flex-basis: 66%;
}
#two{
order: 2;
flex-basis: 66%;
}
#three{
order: 1;
flex-basis: 34%;
}
#four{
order: 2;
flex-basis: 17%;
}
#five{
order: 2;
flex-basis: 17%
}
}
#media (max-width:599px){
#wrapper {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
#one{
order: 1;
flex-basis: 100%;
min-height: 40vh;
}
#two{
order: 3;
flex-basis: 50%;
}
#three{
order: 5;
flex-basis: 50%;
}
#four{
order: 2;
flex-basis: 50%;
}
#five{
order: 4;
flex-basis: 50%
}
}
<div id='wrapper'>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<div id='five'>5</div>
</div>
- UPDATED -
The answer is YES,
...but with some trickery and maybe not the flexing you might like with 2 flex wrappers side-by-side. Splitting the problem in two, a regular flex container (1&2&3) and some relative positioning of a second (4&5) you will get the required layout.
I am not sure this is the best to do or even the answer you wanted, but maybe it is just what you needed.
Have a look at the snippet and let me know!
/* Global stuff */
html, body { box-sizing: border-box; height: 100%; width: 100%;
margin: 0; padding: 0; border: 0 }
*, *:before,
*:after { box-sizing: inherit }
/* Solution */
#w1 { display: flex;
flex-flow: column wrap; /* vertical arrangement */
align-items: flex-end; /* forces 2&3 to lower right */
with: 100%; height: 100% } /* full screen */
#i1 { width: 100%; height: 50% } /* full width, half height of #w1 */
#i2,#i3 { width: 50%; height: 25% } /* half width, half height of #w1 */
#w2 { display: flex; flex-direction: column;/* stay unchanged */
position: absolute; top: 50%; /* nasty, but works */
width: 50%; height: 50% } /* stay unchanged */
#i4,#i5 { width: 100%; height: 50% } /* stay unchanged */
#i1::before { content: 'mobile '}
#media all and (min-width: 720px) {
#i1::before { content: 'desktop '}
/* become equal in size */
#i1,#i2,#i3 { width: 50%; height: 50% } /* half width, half height of #w1 */
#w1 { flex-flow: row wrap; /* horizontal arrangement */
justify: content: flex-start }/* forces 1&2&3 to upper left */
#w2 { right: 0 } /* reposition, nasty, but works */
}
/* Demo */
#w1 *, #w2 * { text-align: center; font-size: 40px; font-weight: bold;
background: #f0f0f0; border: 2px solid black }
<div id="w1">
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
</div>
<div id="w2">
<div id="i4">4</div>
<div id="i5">5</div>
</div>