时间戳

首页 > 解决方案 > Flexbox 中间列居中问题

html - Flexbox 中间列居中问题

问题描述

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

标签： htmlcssflexboxcentering

解决方案

添加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>

请注意，只有添加省略号才能使您的徽标居中。

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>

推荐阅读