Tailwind - Flex-No-Shrink 和 Flex-Wrap 的工作原理答案

【问题标题】：Tailwind - How Flex-No-Shrink and Flex-Wrap WorkTailwind - Flex-No-Shrink 和 Flex-Wrap 的工作原理
【发布时间】：2019-07-11 07:33:31
【问题描述】：

我有两个问题，

当我指定宽度（比如 w-1/5）时，“Flex-no-shrink”不起作用...这不可能吗？当我在 div 上指定一些宽度时，所有 flex 属性似乎都不起作用。（我的目标是因为它是一个侧边栏 div，我希望在我的应用程序的所有部分中宽度保持相同，但是在某些部分我的侧边栏内容较短，因此我最终在我的网站上拥有一个宽度不同的侧边栏）
我的“flex-wrap”也存在类似问题。如果我不指定子 div 的宽度，则当我调整浏览器大小时，flex wrap 会起作用。当我指定宽度时，div 将开始缩小而不跳到底部。

<div class="mt-2 mb-5 pl-4">
     <div class="flex w-full">
         <div class="flex-no-shrink w-1/5 bg-white border-sidebarborder border rounded shadow my-2 pt-3 px-2">
             @yield('sidebarmenu')
         </div>

         <div class="bg-white m-2 border border-contentborder rounded shadow border-sidebarborder w-full">
             @yield ('content')
         </div>
     </div>
 </div>

我在这里做错了什么？

谢谢。侧边栏的结构如下；

<ul class="sidebar-ul">
    <label class="sidebarheader">Management </label>
    <li class="sidebar-li sidebar-li:hover"> <a class="sidebar-a sidebar-a:hover"> Item  </a> </li>
</ul>

由于我在整个网站都使用它，所以我把它拿出来app.scss，样式如下；

.sidebarheader {
    background-color: #d5e5ef;
    @apply  block py-2 mb-1 px-2 text-sm capitalize;
}
.sidebar-li {
    @apply pb-1 px-3;
}
.sidebar-li:hover {
background-color: #f3f3f3;
}

.sidebar-a {
    color:navy;
    font-size:13px;
    @apply no-underline;
}

.sidebar-a:hover {
    color: #3f71b1;
    @apply underline;
}

.sidebar-ul {
    @apply list-reset w-full pb-6 ;
}

【问题讨论】：

目前您的问题只能由具有 CSS 知识和顺风知识的人来回答。如果您提供runnableminimal reproducible example，包括所需的资源并允许检查，您将使任何具有 CSS 知识的人都能回答您的问题，无论是否熟悉尾风，这是一个更大的池。
您可能还必须发布您的侧边栏菜单 @content 代码 - 这可能有一些样式可能会导致问题
@CodeBoyCode 我刚刚用我的侧边栏样式和结构更新了帖子。每个页面上的内容部分都不同——内容会像帽子一样影响侧边栏 div 吗？在某些页面上，我有标题、表格等......

标签： css flexbox tailwind-css

【解决方案1】：

所以看起来你不能将 flex-no-shrink 与 % width 类一起使用，例如：

'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',

我建议坚持使用固定大小，或者添加自定义 css 类并使用 calc()

抱歉，我没有更好的消息，但使用百分比类总是会导致缩放，因为它是 vw 的 %

【讨论】：