Выравнивание элементов влево и в центре с помощью flexbox

Я использую flexbox для выравнивания моих дочерних элементов. То, что я хотел бы сделать, - это центр одного элемента, а другой - влево. Обычно я бы просто установил левый элемент, используя margin-right: auto. Проблема в том, что выталкивает центральный элемент из центра. Возможно ли это без с использованием абсолютного позиционирования?

HTML и CSS

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
</div>

Ответ 1

EDIT: См. Индивидуальный ответ ниже, это лучшее решение.

Идея flexbox заключается в том, чтобы обеспечить структуру для легкого выравнивания элементов с переменными размерами внутри контейнера. Поэтому нет смысла создавать макет, где ширина одного элемента полностью игнорируется. В сущности, это именно то, для чего является абсолютное позиционирование, поскольку элемент выходит из нормального потока.

Насколько я знаю, нет никакого хорошего способа сделать это, не используя position: absolute;, поэтому я бы предложил использовать его... но если вы ДЕЙСТВИТЕЛЬНО не хотите или не можете использовать абсолютное позиционирование, тогда Я полагаю, вы могли бы использовать один из следующих обходных решений.

Если вы знаете точную ширину "Left" div, вы можете изменить justify-content на flex-start (слева), а затем выровнять div "Center" следующим образом:

#center {
    position: relative;
    margin: auto;
    left: -{half width of left div}px;
}

Если вы не знаете ширину, вы можете дублировать "Влево" с правой стороны, используйте justify-content: space-between; и скройте новый правый элемент: Чтобы быть ясным, это действительно, действительно уродливо... лучше использовать абсолютное позиционирование, чем дублировать контент.: -)

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 500px;
}
#right {
    opacity: 0;
}

<div id="parent">
  <span id="left">Left</span>
  <span id="center">Center</span>
  <span id="right">Left</span>
</div>

Ответ 2

Добавьте третий пустой элемент:

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

И следующий стиль:

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Только левое и правое настроены на рост и благодаря фактам, которые...

есть только два растущих элемента (неважно, пусто) и
что оба имеют одинаковые ширины (они равномерно распределяют доступное пространство)

Элемент

... центра всегда будет идеально центрирован.

Это гораздо лучше, чем принятый ответ, на мой взгляд, потому что вам не нужно копировать левое содержимое вправо и скрыть его, чтобы получить ту же ширину для обеих сторон, это просто волшебным образом (flexbox является магическим).

В действии:

.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}


/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}
.left,
.right {
  padding: 3px;
  border: 2px solid red;
}
.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

Ответ 3

Если вы не хотите полагаться на позиционирование, единственный способ, который я нашел, который делает его по-настоящему центрированным, - использовать комбинацию автоматической маржи и отрицательного поля, чтобы центрированный элемент не переместился с помощью выравнивания по левому краю элемента, Это требует, чтобы вы знали точную ширину выровненного слева элемента.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: center;
}

.block {
  width: 120px;
  background: tomato;
}

.justify-start {
  margin-right: auto;
}

.justify-center {
  margin-right: auto;
  margin-left: -120px;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block justify-center"></div>
</div>

Ответ 4

Попробуйте это без хаков:)

CSS

.container{
  width: 500px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;/* just in case*/
  justify-content: space-between;
}
.box p:nth-child(2){
  text-align: center;
  background-color: lime;
  flex: 1 1 0px;
}

HTML

<div class="container">
  <div class="box">
    <p>One</p>
    <p>Two</p>
  </div>
</div>

http://codepen.io/whisher/pen/XpGaEZ

Ответ 5

Насколько я знаю, это возможно со следующим кодом.

https://jsfiddle.net/u5gonp0a/

.box {
    display: flex;
    justify-content: center;
    background-color: green;
    text-align: left;
}

.left {
    padding: 10px;
    background-color: pink;
}

.center {
    padding: 10px;
    background-color: yellow;
    margin: 0 auto;
}

<div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
</div>