Flex-упаковка и выравнивание

Question

У меня есть div в flexbox с 2 элементами и промежутком между ними.У меня также есть flex-wrap для контейнера и flex auto для каждого элемента.

Есть ли способ сделать первый элемент с выравниванием текста слева до его переноса и после выравнивания текста поцентр.

Проблема в том, что я не знаю, когда элементы обертываются.

Вот пример: https://jsfiddle.net/bj9km7vg/1/

.align-center{
   text-align: center; // it have to be visible only when the div is wrap and 100% of the with
}

Спасибо всем,

Answer 1

Вы можете сделать это по-другому, и вам не нужно думать о text-align, но о ширине элемента, так как это всего одна строка.По сути, ваш текст всегда будет по центру, но ширина будет либо соответствовать содержимому, либо будет иметь полную ширину:

header {
  display: flex;
  flex-wrap: wrap;
}

header div:first-child {
  text-align:center; /*center by default*/
  flex-grow:1; /*will be full width after the wrap*/
}
header div:last-child {
  flex-grow:100; /*make it consume more space to have a left alignment before wrap*/
}


ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content:center;
}
li {
  margin: 0 1em;
}

<header>
  <div class="align-center">
    <a href="">Have to be align</a>
  </div>
  <div>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</header>

Обновление

Для управления полем вы можете рассмотреть псевдоэлемент внутри второго контейнера:

header {
  display: flex;
  flex-wrap: wrap;
}

header div:first-child {
  text-align:center; /*center by default*/
  flex-grow:1; /*will be full width after the wrap*/
}
header div:last-child {
  flex-grow:100; /*make it consume more space to have a left alignment before wrap*/
  display: flex;
  flex-wrap:wrap;
}


ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-grow:1;
}
li {
  margin: 0 1em;
}

header div:last-child::before {
  content:"";
  width:6em; /*your margin*/
}

<header>
  <div class="align-center">
    <a href="">Have to be align</a>
  </div>
  <div>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</header>