Попутный ветер - как работают Flex-No-Shrink и Flex-Wrap - PullRequest
Новая
       18

Попутный ветер - как работают Flex-No-Shrink и Flex-Wrap

0 голосов
/ 18 февраля 2019

У меня две проблемы,

  1. «Flex-no-shrink» не работает, когда я задаю ширину (скажем, w-1/5) ... Разве это не возможно?Как только я указываю некоторую ширину в div, все свойства flex, похоже, не работают.(Моя цель здесь заключается в том, что, поскольку это div боковой панели, я хочу, чтобы ширина оставалась одинаковой во всех разделах моего приложения, однако в некоторых разделах содержимое моей боковой панели короче, поэтому я получаю боковую панель с различной шириной по всему сайту)

  2. Аналогичная проблема существует и для моего "flex-wrap".Если я не укажу ширину дочерних элементов div, сгибание будет работать при изменении размера браузера.Когда я укажу ширину, 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 ;
}

1 Ответ

0 голосов
/ 22 февраля 2019

Похоже, вы не можете использовать 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

...