弯曲包装和对齐

Question

我在flexbox中有一个div，其中包含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>