Max 2 items with center alignment

Question

I want to move the page 3 to the next row in the following snippet. But I couldn't find how to do that.

The conditions are

Pages in a row should be aligned to center. (e.g. .container { justify-content: center })
If wrapping is not necessary (items are small enough), a row should contain 2 pages.
Page's width is not fixed. (that is, I can't know page width in advance)

I tried pairing by 2 pages, but it broke the requirement 2. Is there a way without js?

How to specify line breaks in a multi-line flexbox layout?
I'm not searching newline after every nth item. If I should find positions for newline and insert on that by js, please let me know that by comment.

Breaking to a new line with inline-block
It also about force line break. I can't find a hint for possibility.

body {
  margin: 0;
}
.container {
  background: #eee;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.page {
  width: 35vw;
  height: 80vh;
  background: #ddd;
  border: 1px solid gray;
  flex: 0 1 auto;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.long {
  width: 70vw;
}
.short {
  width: 20vw;
}

<div class="container">
  <div class="page short">page 1</div>
  <div class="page short">page 2</div>
  <div class="page">page 3</div>
  <div class="page">page 4</div>
  <div class="page long">page 5</div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

Red Wing Justice Chan · Accepted Answer · 2020-11-15T11:05:19.463

Just use div to wrap the page3

var totalboxwidth = 0;
var docw = $(document).width(); 
$(".page").each(function(index) {
  //index = 2 means the third child
  totalboxwidth = $(this).width()+totalboxwidth;
  if(index == 2){
    if(totalboxwidth<=docw){
    $(this).wrap('<div class="row"></div>');
   }
  }
});

body {
  margin: 0;
}
.container {
  background: #eee;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.row{
display:flex;
width:100%;
justify-content: center;
}
.page {
  width: 35vw;
  height: 80vh;
  background: #ddd;
  border: 1px solid gray;
  flex: 0 1 auto;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.long {
  width: 70vw;
}
.short {
  width: 20vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="page short">page 1</div>
  <div class="page short">page 2</div>
  <div class="page">page 3</div>
  <div class="page">page 4</div>
  <div class="page long">page 5</div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

There may be my lack of explanation. I supplemented condition 3. I can't even know page 3 will take a whole row, and I can't wrap all pages with `div`. — jeiea, Nov 15 '20 at 08:50
No, I can edit html, but I can't assume what element will span. This solution picked exactly the page 3, but then I should check whether page 1 and 2 are not wide and do div wrapping by js because page 1 can be wide. I want to know js is required. — jeiea, Nov 15 '20 at 10:23
then use jquery to check whether there is enough space to include 3 pages in the same row. If yes, then use div to wrap the page3. Hope this can help you — Red Wing Justice Chan, Nov 15 '20 at 11:07

Max 2 items with center alignment

1 Answers1