Flexbox 中间列居中问题答案

【问题标题】：Flexbox middle column centering issueFlexbox 中间列居中问题
【发布时间】：2019-02-14 05:14:32
【问题描述】：

如何防止左列增长？希望徽标列居中，左右列占据结果空间。做了一个小提琴来演示效果。 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>

【问题讨论】：

但这会将外部列推出容器。我们需要 white-space:nowrap 来计算元素的宽度。我们想看看它们什么时候换行，然后我们展示一个不同的视图。

标签： html css flexbox centering

【解决方案1】：

将flex: 1 添加到right 和left 列，并在长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>

【讨论】：

那很好，但我“想要”溢出，以便我可以使用 javascript 计算元素是否导致溢出。您对如何做到这一点有任何想法吗？
刚刚看到省略号设置在父级上，对子级没有影响，很好。所以我们可以强制溢出。
为什么您认为只有省略号才能使徽标居中？会说溢出：隐藏是我正在寻找的设置，以防止列占用未使用的空间。我错过了什么吗？
@Rob 是的，我的意思是 overflow acutually...因为代码有省略号，我是这样写的:)