html - Flexbox 中间列居中问题

Question

如何防止左列增长？希望 Logo 列居中，左右列占据由此产生的空间。做了一个 fiddle 来演示效果。 https://jsfiddle.net/roberthenniger/1qyeghm7/

.nav-column:nth-child(1), .nav-column:nth-child(3) {
    flex-grow:1;
    flex-basis:50%;
}

我们有一个 javascript 检查内容宽度然后更改为不同的布局，但我仍然不希望外部列增长。我知道它会变大，因为左边还有空间。

body .nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 100px;
}
body .nav span {
  white-space: nowrap;
}
body .nav .nav-column:nth-child(1) {
  text-align: left;
  justify-content: flex-start;
  flex-grow: 1;
  flex-basis: 50%;
}
body .nav .nav-column:nth-child(2) {
  text-align: center;
  justify-content: center;
  background-color: #99CCFF;
  flex-basis: 160px;
}
body .nav .nav-column:nth-child(3) {
  text-align: right;
  justify-content: flex-end;
  flex-grow: 1;
  flex-basis: 50%;
}

<div class="nav">
  <div class="nav-column">
    <span>Menu Links with long content but it should not overlap and not push to the right</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>


<div class="nav">
  <div class="nav-column">
    <span>here it looks fine</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>

Answer 1

添加flex: 1到右和左列，并为长span添加一个省略号 (我注意到您的内容有 white-space: nowrap)通过添加:

overflow: hidden;
text-overflow: ellipsis;

请看下面的演示:

body .nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 100px;
}
body .nav span {
  white-space: nowrap;
}
body .nav .nav-column:nth-child(1) {
  text-align: left;
  justify-content: flex-start;
  /*flex-grow: 1;*/
  /*flex-basis: 50%;*/
  flex: 1; /* ADDED */
  overflow: hidden; /* ADDED */
  text-overflow: ellipsis; /* ADDED */
}
body .nav .nav-column:nth-child(2) {
  text-align: center;
  justify-content: center;
  background-color: #99CCFF;
  flex-basis: 160px;
}
body .nav .nav-column:nth-child(3) {
  text-align: right;
  justify-content: flex-end;
  /*flex-grow: 1;*/
  /*flex-basis: 50%;*/
  flex: 1; /* ADDED */
  overflow: hidden; /* ADDED */
  text-overflow: ellipsis; /* ADDED */
}

<div class="nav">
  <div class="nav-column">
    <span>Menu Links with long content but it should not overlap and not push to the right</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>
<div class="nav">
  <div class="nav-column">
    <span>here it looks fine</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>

请注意，仅添加省略号 会使您的 Logo 居中。

body .nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 100px;
}
body .nav span {
  white-space: nowrap;
}
body .nav .nav-column:nth-child(1) {
  text-align: left;
  justify-content: flex-start;
  flex-grow: 1;
  flex-basis: 50%;
  overflow: hidden; /* ADDED */
  text-overflow: ellipsis; /* ADDED */
}
body .nav .nav-column:nth-child(2) {
  text-align: center;
  justify-content: center;
  background-color: #99CCFF;
  flex-basis: 160px;
}
body .nav .nav-column:nth-child(3) {
  text-align: right;
  justify-content: flex-end;
  flex-grow: 1;
  flex-basis: 50%;
  overflow: hidden; /* ADDED */
  text-overflow: ellipsis; /* ADDED */
}

<div class="nav">
  <div class="nav-column">
    <span>Menu Links with long content but it should not overlap and not push to the right</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>
<div class="nav">
  <div class="nav-column">
    <span>here it looks fine</span>
  </div>
  <div class="nav-column">
    <span>Logo</span>
  </div>
  <div class="nav-column">
    <span>CTA</span>
  </div>
</div>