Flexbox 中间列居中问题

Question

如何防止左栏变大？想让logo列居中，左右列取结果space。做了一个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 添加到 right 和 left 列并添加一个 ellipsis 很长 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>

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

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>

Flexbox 中间列居中问题

Flexbox middle column centering issue

html

css

centering

flexbox