it-roy-ru.com

Выравнивание элементов слева и по центру с помощью 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>

26
Carl Edwards

Правка: См. ответ Соло ниже, это лучшее решение.


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

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


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

#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>

18
pschueller

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

<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>

33
Solo

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

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

1
Whisher

У меня есть другое решение. По моему мнению, добавление пустого блока к центральному элементу - это хорошо, но с точки зрения кода это немного уродливо. Мое решение для этого ниже

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

   #parent {
      display: flex;    
   }

   #left {
      flex:1;
   } 

   #center {
      flex:1;
   } 

   #parent:after {
      flex:1;
   }
1
Thiwanka Dodanwela

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

.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>

0
Blizwire