flex 布局防止元素被挤换行_flex字体居中不换行

作者：weixin_40725706 | 2024-03-14 13:43:24

踩

flex字体居中不换行

刚开始是这样的代码：

<div class="flex">
  <span>选择模型：</span>
  <n-select :options="state.chatModelOptions" />
</div>
1
2
3
4

选择模型换行了…不行，这个效果不行，修改后：

<div class="flex items-center whitespace-nowrap">
  <span class="mr-2">选择模型：</span>
  <n-select :options="state.chatModelOptions" class="flex-1" />
</div>
1
2
3
4

这里做了几个调整：

items-center：垂直居中对齐flex子项。
mr-2：给span标签添加了一个margin-right以提供一些空间。
whitespace-nowrap：防止内容换行。
flex-1：允许n-select组件伸展并填充剩余的空间。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/234900