margin: 0 auto; (or simply auto for two-axis centering) will not have that issue...

dumbo-octopus · 2024-04-18T05:50:23 1713419423

`width: fit-content;` is a good tip. Still, it's annoying that the current behavior is the default.

I was not able to get the nth child variants to work:

    <main>
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </main>

    main {
      display: flex; flex-direction: row; justify-content: center;
    /*   width: fit-content; */
    }
    
    div {
      min-width: 400px; height: 300px; background-color: wheat; margin: 4px;
    }
    
    div:nth-child(1){
        margin-left: auto;
    }
    div:nth-last-child(1){
        margin-right: auto;
    }

Inviz · 2024-04-18T06:15:09 1713420909

Simply dont use justify-content in that case. https://codepen.io/inviz/pen/XWQxaOp

dumbo-octopus · 2024-04-18T11:51:51 1713441111

Hm, that works well enough as a replacement for `center`, but not any of the `space-*` variants. But "min-width: fit-content" works nicely for all the cases I tried.