1

我有两个问题，

  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 ;
}
4

1 回答 1

0

所以看起来你不能将 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

于 2019-02-22T12:32:44.963 回答