Jutifying content in flex after wrap-CodePudding

I'm having a situation where I'm having a page title on the left side and rating number and stars on the right side. I'm trying to align all items centered once flexbox wraps. Once "Longer Page Title" reaches rating and stars and flexbox wraps, they should all be center aligned.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.title,
.ratings-and-stars {
  border: 3px solid red;
}
.ratings-and-stars {
  text-align: right;
}

<div >
  <div >Longer Page Title</div>
  <div >
    <div >10</div>
    <div >**********</div>
  </div>
</div>

EDIT: I need to horizontally center content on mobile once flexbox wraps

CodePudding user response：

The closest to your description i can think about is to play with margin & text-align and flex-grow for the title.

Below is an average demo. However , you will need a mediaquerie set at a fixed breakpoint to decide when to wrap. See second snippet for a possible option

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.title {
  flex: 1;
}

.title,
.ratings-and-stars {
  border: 3px solid red;
  margin: auto;
  text-align:center;
  text-align-last:left;
}

.ratings-and-stars {
  text-align: right;
}

<div >
  <div >Longer Page Title ////////////////////long_string_for_demo\\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div >
    <div >10</div>
    <div >**********</div>
  </div>
</div>

Compromise with a mediaquerie (here set at 600px, use your own breakpoint)

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}

.title,
.ratings-and-stars {
  border: 3px solid red;
}

.ratings-and-stars {
  text-align: right;
}

@media (max-width:600px) {
  .title {
    min-width: 100%;
  }
  .flex-container {
    justify-content: center;
  }
}

<div >
  <div >Longer Page Title</div>
  <div >
    <div >10</div>
    <div >**********</div>
  </div>
</div>

white-space is also a possibility for an average result:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.title {
 white-space:prewrap;
 margin:auto auto auto 0;
}

.title,
.ratings-and-stars {
  border: 3px solid red;
  text-align:center;
}

.ratings-and-stars {
  text-align: right;
}

<div >
  <div >Longer Page Title //////////////////// long_string_for_demo \\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div >
    <div >10</div>
    <div >**********</div>
  </div>
</div>

CodePudding user response：

You are missing align-items: center more info

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center
}
.title,
.ratings-and-stars {
  border: 3px solid red;
}
.ratings-and-stars {
  text-align: right;
}

<div >
  <div >Longer Page Title</div>
  <div >
    <div >10</div>
    <div >**********</div>
  </div>
</div>