Is there a way to have different justify-content values for different rows inside a flexbox-containe-CodePudding

Is there a way to have different justify-content values for different rows inside a flexbox-container? Here is my html:

    <div >
      <div >
        <h2>Text</h2>
        <p>Text</p>
      </div>
      <div >
        <h2>Text</h2>
        <p>Text</p>
      </div>
      <figure ><img src="materiale/junckers.png" alt="junckers"></figure>
      <figure ><img src="materiale/byg-garanti.png" alt="byg-garanti"></figure>
      <figure ><img src="materiale/gulvbranchen.png" alt="gulvbranchen"></figure>
    </div>

I want the first two flex-items (the two div's) to fill one row and to be aligned in accordance with justify-content: space-between; And I want the three last flex-items (the three figure's) to fill the next row and to be aligned in accordance with justify-content: space-evenly;

Is that possible in the same flex-container?

CodePudding user response：

The answer is no.

In grid, there is the justify-self property in which this would be true. However, in flex there is no support for this style as of May 2022.

flex does support align-self for aligning flex item's on the y-axis (align-items), but not for the x-axis (justify-content).

The good news.

You can still replicate these styles in your stylesheet but they will have to be done manually. You can target the first and second flex-item and use width: calc(100%/2) for the first two flex items that you want to each take 50%. Then you can add flex-wrap: wrap on to your flex-container so the image flex-items wrap onto a new row. Then you can replicate justify-content: space-between; by adding margin: auto; to those respective flex-items.

See below:

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

.flex-item:first-child,
.flex-item:nth-child(2) {
  width: calc(100%/2);
  outline: dotted 1px black;
}

.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(5) {
  outline: solid 1px;
  background: orange;
  padding: 10px;
}

<div >
  <div >
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <div >
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <figure  style="margin-right: auto;"><img src="https://dummyimage.com/100/000/fff" alt="junckers"></figure>
  <figure  style="margin: auto;"><img src="https://dummyimage.com/100/000/fff" alt="byg-garanti"></figure>
  <figure  style="margin-left: auto;"><img src="https://dummyimage.com/100/000/fff" alt="gulvbranchen"></figure>
</div>