Как центрировать выравнивание одного элемента гибкости и выравнивание по правому краю другого с помощью Flexbox

Я совершенно не знаком с Flexbox и хотел выровнять кнопки, но я не мог понять, как обращаться с обычным случаем с помощью кнопки с выравниванием по центру и правой кнопкой в ​​одной строке, используя только Flexbox.

Тем не менее, я нашел способ, который использовал невидимый элемент с выравниванием по левому краю с той же длиной, что и выровненный по правому краю элемент, и flex justify-content с space-between, чтобы средний элемент был центрирован в строке.

Есть ли более прямой способ с Flexbox?

.flexcontainer {
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 200px;
}
.iteminvisible {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  visibility: hidden;
}
.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
  .itemright {
    flex: 0 1 auto;
    width: 100px;
    height: 100px;
  }
<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

Ответы

Ответ 1

Использование justify-content: space-between с невидимым элементом гибкости, как описано в вашем вопросе, является хорошим способом достижения желаемого макета. Обратите внимание, что средний элемент может быть только центрирован, если оба левого и правого элементов равны по длине (см. Демонстрацию).

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

.flexcontainer {
      display: flex;
      justify-content: flex-start;   /* adjustment */
      position: relative;            /* new */
      width: 500px;
      height: 200px;
    }

.itemcenter {
      flex: 0 1 auto;
      width: 150px;
      height: 100px; 
      position: absolute;             /* new */
      left: 50%;
      transform: translateX(-50%);
    }

.itemright {
      flex: 0 1 auto;
      width: 100px;
      height: 100px;
      margin-left: auto;              /* new */
    }
<div class="flexcontainer">
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

Ответ 2

   .container {
      display: flex;
      flex-direction: column; //this will allow flex-end to move item to the right            
      align-items: center;
   }
   .right-item {
      align-self: flex-end;
   }

Ответ 3

Из того, что я понимаю, кнопка, которую вы хотите "плавать", не должна быть flex: 0 1 auto, а скорее flex: 0 0 auto. Первый параметр в стиле flex определяет, должен ли элемент расти. Если вы не хотите, чтобы он заполнил больше места, чем нужно, не говорите, чтобы он расти.