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

Posted 2021-03-27

我有两个问题，

1. 当我指定宽度（比如w-1/5）时，“Flex-no-shrink”不起作用......这不可能吗？当我在div上指定一些宽度时，所有flex属性似乎都不起作用。 （我的目标是，因为它是一个侧边栏div，我希望我的应用程序的所有部分的宽度保持不变，但是在某些部分我的侧边栏内容更短，因此我最终在我的网站上有一个不同宽度的侧边栏）
2. 我的“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 ;
}

答案

所以看起来你不能使用％-width类的flex-no-shrink，例如：

'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的百分比