时间戳

首页 > 解决方案 > Flex-wrap 和对齐

css - Flex-wrap 和对齐

问题描述

我在 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
}

谢谢大家，

标签： cssflexbox

解决方案

您可以以不同的方式执行此操作，无需考虑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>

推荐阅读