本文旨在解决flex布局中，当一个文本元素与一个需要填充剩余空间的元素并存时，文本可能意外换行的问题。通过深入理解`flex-shrink`属性，我们将展示如何利用`flex-shrink: 0`确保文本元素保持其固有宽度不收缩，从而实现文本单行显示并允许相邻元素正确填充布局中的剩余空间。
Flex布局中的文本换行挑战
在使用CSS Flexbox进行布局时，我们经常会遇到需要将文本内容与一个填充剩余空间的元素（例如一条分隔线）并排显示的需求。一个常见的场景是，在一个容器内，左侧显示一段动态长度的文本，右侧则是一个横向的线条，要求这条线延伸至容器末尾，且整个布局保持在单行。
然而，在默认的Flexbox行为下，如果文本内容较长，或者容器空间有限，文本元素可能会意外地换行，而不是保持在单行显示。这通常发生在Flex容器尝试在所有子项之间分配空间时，默认的收缩行为导致文本元素宽度不足而发生换行。
考虑以下初始的HTML结构和CSS样式，其中.question-category-sub是文本容器，.lineHorizontal是横线元素：
<div class="lineHorizontal__container">
<div class="question-category-sub">
Art - Music
</div>
<div class="lineHorizontal">
</div>
</div>.question-category-sub {
display: flex; /* 注意：这里对文本元素也使用了flex，但其内容本身是文本 */
}
.lineHorizontal__container {
align-items: center;
display: flex;
height: 80px;
}
.lineHorizontal {
border-top: 1px solid rgb(30, 30, 30);
width: 100%; /* 期望它能填充剩余空间 */
}在这种配置下，即使.lineHorizontal__container是display: flex，并且.lineHorizontal被赋予了width: 100%，Art - Music这样的文本内容仍然可能显示为两行。这是因为Flex容器的子项默认具有收缩能力。
立即学习“前端免费学习笔记（深入）”；
理解 flex-shrink 属性
Flexbox中的flex-shrink属性定义了弹性盒子在空间不足时，相对于其他弹性项目收缩的程度。其默认值为1，意味着当Flex容器的可用空间不足以容纳所有Flex项目时，每个Flex项目都会根据其flex-shrink值按比例收缩。
当文本元素（例如.question-category-sub）作为Flex项目时，如果其flex-shrink为默认值1，并且Flex容器的总宽度不足以容纳文本的固有宽度以及其他Flex项目的宽度，那么文本元素就会被允许收缩。对于文本内容而言，这种收缩表现为文本换行，从而导致布局不符合预期。
同时，.lineHorizontal虽然设置了width: 100%，但在Flex容器中，width: 100%并不总是意味着它会占据所有剩余空间。它只是提供了一个理想的宽度，但最终的宽度会受到Flex算法的约束。如果其他Flex项目（如文本）在收缩，那么为.lineHorizontal分配的空间可能也会受影响。
解决方案：禁用文本元素的收缩
要解决文本换行问题，并确保它始终保持在单行（只要有足够的空间），我们需要禁用文本元素的收缩行为。这可以通过将flex-shrink属性设置为0来实现。
.question-category-sub {
flex-shrink: 0; /* 阻止文本元素收缩 */
/* 保持 display: flex; 如果其内部元素需要flex布局 */
/* 如果文本元素内部不需要flex，可以移除 display: flex; */
}通过将.question-category-sub的flex-shrink设置为0，我们明确告诉Flex容器，这个元素不允许收缩。它将始终尝试保持其内容的固有宽度（或者由flex-basis或width明确指定的宽度）。这样，即使容器空间有限，文本也不会换行。
一旦文本元素被限制不收缩，它就会占据其必要的空间。此时，如果.lineHorizontal元素被设置为flex-grow: 1（或者在没有其他flex-grow元素且文本不收缩的情况下，width: 100%能够有效工作），它将自然地填充Flex容器中剩余的所有可用空间，从而实现横线延伸到行尾的效果。
完整示例代码
下面是结合了解决方案的完整HTML和CSS代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox文本不换行与横线填充示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
.lineHorizontal__container {
display: flex; /* 启用Flex布局 */
align-items: center; /* 垂直居中对齐子项 */
height: 40px; /* 示例高度 */
width: 100%; /* 容器宽度 */
max-width: 600px; /* 限制最大宽度，方便观察效果 */
border: 1px solid #ccc; /* 方便观察容器边界 */
box-sizing: border-box;
margin-bottom: 10px;
}
.question-category-sub { 
