Угловой материал Flex дает неправильный размер

Похоже, что некоторые значения для установки flex в библиотеке макетов уклонов не работают.Угловой материал Flex дает неправильный размер

Вот очень простой пример, который показывает это поведение. Как вы можете видеть, если вы щелкнете, размеры некоторых значений правильны, а другие, похоже, не имеют никакого смысла.

http://codepen.io/anon/pen/RaQzxr

Кто-нибудь видел это раньше?

<div ng-cloak ng-app="MyApp"> 

    <div layout="row"> 
    <md-card flex="10"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 10%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="11"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 11%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="12.5"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 12.5%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="15"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 15%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="16"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 16%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="19"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 19%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
    <div layout="row" layout-xs="column"> 
    <md-card flex="20"> 
     <h2>Card title #1</h2> 
     <md-card-content> 
     <p>This should be 20%!</p> 
     </md-card-content> 
    </md-card> 
    <md-card flex> 
    </md-card> 
    </div> 
</div>

источник

2016-04-12 Liron

У меня есть те же проблемы. Если вы проверите flex = 10, вставьте класс flex-10. Вы проверяете ширину и 10%. Flex-16 не вставляет ширину 16%, поэтому я думаю, что у них есть классы для некоторых значений, таких как 12,5 20 25 33 и т. Д. Общие значения, но отсутствуют классы для 16, что является странным числом для макета. Не совсем уверен в этом, нам нужно проверить исходный код. – perseus

цитата с сайта Угловой Материал:. «Прогибается директива раскладки ребенка может быть дана целое значение от 0-100 элемента будет растягиваться на процент свободного пространства, совпадающее со значением В настоящее время, гибкое значение директивы. ограничен кратным пяти, 33 или 66 ».

https://material.angularjs.org/latest/layout/children

источник

2016-04-13 00:37:10 sdfacre

Слишком плохо, что это еще не «гибкий». Надеюсь скоро. – Liron

Угловой материал Flex дает неправильный размер

ответ

Смежные вопросы