Question

如何保持左列不增长？希望徽标列居中，而左列和右列占用空间。摆弄小提琴来演示效果。 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

在{em> right 和 left 列中添加flex: 1，并为长span添加省略号（I通过添加以下内容发现您拥有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中列居中问题

1 个答案: