Flexbox - justify specific element [duplicate]

问题

This question already has answers here:

Center and right align flexbox elements (7 answers)

Closed last year.

I’m using Flexbox, I want to create container that contains two divs in one row. One of them should be horizontally centered(relatively to container) and second one should be on the left(like it wouldn't be justified). Is there any solution that doesn’t require a third, hidden div?

Unfortunately both of divs don’t have specified width.

Here is the structure of html:

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

回答1:

You can do it with the positioning:

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

.container > div:first-child {
  position: absolute;
  left: 0;
}

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

回答2:

this is not perfect, but you can do this.

.container {
  display: flex;
}

.container > div{
   margin-right: auto;
}

.container > div:first-child {
  min-width:0;
  width:0;
  white-space:nowrap;
}

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

来源：https://stackoverflow.com/questions/50273585/flexbox-justify-specific-element