如何将文本适配Flexbox容器？实现中间带Logo的导航栏

Hey there! Let's tackle your two frontend layout questions one by one—they're both super common when working with Flexbox, so I'll break them down with clear code examples and explanations.

Flexbox makes it easy to handle text layout, but there are a few key tricks depending on what you need:

场景1：自动换行避免文本溢出 #

If your text is too long to fit in a single line, you'll want to let it wrap to prevent overflow. Here's how:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 强制子项在空间不足时换行 */
  width: 300px; /* 示例容器宽度 */
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-item {
  flex: 1 1 auto; /* 允许子项根据空间缩放 */
  margin: 8px;
  word-wrap: break-word; /* 让长单词或URL自动换行 */
}

This setup ensures long text stays within the Flexbox container instead of spilling outside.

场景2：单行文本溢出时显示省略号 #

For situations where you want text to stay on one line and show an ellipsis when it overflows, use these properties together:

.flex-container {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-item {
  flex: 0 1 200px; /* 固定基础宽度，允许缩小 */
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号代替溢出文本 */
  padding: 8px;
}

Note: You need to set a specific width or flex-basis value for the ellipsis to work properly.

场景3：多行文本垂直居中 #

To vertically center multi-line text inside a Flexbox item, use align-items: center on the container:

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中所有子项 */
  height: 150px; /* 给容器一个固定高度 */
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-item {
  padding: 8px;
  line-height: 1.5; /* 优化多行文本的可读性 */
}

For a navigation bar with a centered logo and links on either side, we'll use Flexbox to distribute the space evenly. First, let's fix up your HTML structure to separate left/right link lists, then add the CSS:

HTML Structure #

<nav class="navigation">
  <ul class="navigation-list navigation-list-left">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
  </ul>
  <img class="logo" src="https://cdn.example.com/logo.png" alt="Site Logo">
  <ul class="navigation-list navigation-list-right">
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>

CSS Styling #

.navigation {
  display: flex;
  align-items: center; /* 垂直居中所有导航元素 */
  justify-content: space-between; /* 让左右列表贴边，Logo居中 */
  padding: 0 20px;
  background-color: #f8f9fa;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 加个阴影提升层次感 */
}

.navigation-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 24px; /* 列表项之间的间距 */
}

.navigation-list-item a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease; /* hover时的平滑过渡 */
}

.navigation-list-item a:hover {
  color: #007bff; /* hover时的颜色变化 */
}

.logo {
  height: 40px; /* 控制Logo高度，保持和导航栏垂直居中 */
  width: auto; /* 保持Logo比例 */
  flex-shrink: 0; /* 防止Logo被压缩 */
}

/* 针对大屏优化，让左右列表宽度相等，Logo严格居中 */
@media (min-width: 768px) {
  .navigation-list-left,
  .navigation-list-right {
    flex: 1; /* 让左右列表平分剩余空间 */
  }
  
  .navigation-list-left {
    justify-content: flex-start;
  }
  
  .navigation-list-right {
    justify-content: flex-end;
  }
  
  .logo {
    margin: 0 30px; /* 给Logo左右加些间距 */
  }
}

This setup works on mobile too—on smaller screens, the space-between property will keep the links and logo aligned nicely, and you can adjust the media query breakpoints as needed.

内容的提问来源于stack exchange，提问作者muszynov