Wrapping content in flexbox and aligning it justified

Question

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexbox wraps, they should all be aligned in the center.

.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 class="flex-container">
  <div class="title">Longer Page Title</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

EDIT: In addition, I need to ensure that the content is horizontally centered on mobile devices once the flexbox wraps.

css flexbox

Answer 1

Answer №1

To achieve a layout similar to your description, you can utilize margin, text-align, and flex-grow properties for the title element.

Here is a basic demonstration: However, it's recommended to use a media query at a specific breakpoint to determine when wrapping should occur. Refer to the second code snippet below for a potential solution

.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 class="flex-container">
  <div class="title">Longer Page Title ////////////////////long_string_for_demo\\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Consider using a media query (set at 600px in this example, adjust as needed)

.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 class="flex-container">
  <div class="title">Longer Page Title</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Another option that may work is adjusting white-space property:

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

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

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

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

<div class="flex-container">
  <div class="title">Longer Page Title //////////////////// long_string_for_demo \\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Answer 2

To achieve a layout similar to your description, you can utilize margin, text-align, and flex-grow properties for the title element.

Here is a basic demonstration: However, it's recommended to use a media query at a specific breakpoint to determine when wrapping should occur. Refer to the second code snippet below for a potential solution

.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 class="flex-container">
  <div class="title">Longer Page Title ////////////////////long_string_for_demo\\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Consider using a media query (set at 600px in this example, adjust as needed)

.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 class="flex-container">
  <div class="title">Longer Page Title</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Another option that may work is adjusting white-space property:

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

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

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

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

<div class="flex-container">
  <div class="title">Longer Page Title //////////////////// long_string_for_demo \\\\\\\\\\\\\\\\\\\\\\\\ .</div>
  <div class="ratings-and-stars">
    <div class="ratings">10</div>
    <div class="stars">**********</div>
  </div>
</div>

Wrapping content in flexbox and aligning it justified

Answer №1

Similar questions

When you hover over a dropdown menu, the content underneath it is raised slightly and a margin is formed on the right side of the page

Changing the width of an SVG path from 0 to 100% using CSS

sticky bootstrap datepicker anchored to the top of the screen

IE6 disrupts stored layouts

Ways to prevent a page from scrolling

Using the identical code, Wicked PDF generates distinct reports on separate computers

jQuery does not support animations for sliding up or down

PHP code to display "ed elements that do not adjust height"

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

When you hover over the text, the color will shift

Bootstrap 5 and Vue 3 team up to create a stunning masonry layout

LESS — transforming data URIs with a painting mixin

Styling: Ensuring my sidebar does not overlap with my main content on the webpage

Retrieve the image and insert it using an img tag

Is it necessary for me to include body, html at the beginning of my CSS code?

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Adding Multiple CSS Classes to an HTML Element using jQuery's addClass Feature

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME