Как заставить элементы дочернего макета сгибаться в процентах

Question

Как заставить элементы дочернего макета сгибаться в процентах

0

Я использую директивы компоновки углового материала, и у меня возникла проблема с тем, чтобы дочерние элементы сгибались по определенным процентам.

Рассмотрим следующее

<md-card ng-app="MyApp">
  <div layout="column" layout-gt-sm="row" layout-margin layout-fill>
    <div flex-gt-sm="25">
      <label>Status</label>
      <div>Value</div>
    </div>
    <div flex>
      <label>Status</label>
      <div>Value</div>
    </div>
  </div>
</md-card>

Демо-версия CodePen

Я ожидаю, что первый ребенок займет 25% доступного пространства на экранах выше точки останова sm, а второй ребенок возьмет на себя остальные (75%),

Но это не тот случай, я все же нашел, что, если я удалю layout="column" из родительского элемента и поэтому имеет только layout-gt-sm="row" тогда он отлично работает.

Почему он не работает с обоими атрибутами макета?

mindparse 06 июнь 2016, в 14:59

Источник

Теги:

angularjs

angular-material

flexbox

2 ответа

Ещё вопросы

nextt1 · Answer 1 · 2016-06-07T07-24-00.000Z

Просто добавьте атрибут layout-fill в элемент md-card так как вы хотите, чтобы он занимал все свободное пространство. Вот код.

<md-card ng-app="MyApp" style='background-color:pink' layout-fill>
 <div layout="column" layout-gt-sm="row" layout-margin layout-fill style="background-color:red">
  <div flex-gt-sm="25" style="background-color:blue">
   <label>Status</label>
   <div>Value</div>
  </div>
  <div flex style="background-color:yellow">
   <label>Status</label>
   <div>Value</div>
  </div>
 </div>
</md-card>

Вот рабочий пример. http://codepen.io/next1/pen/WxQjzv

Но этот первый ребенок не занимает 25% согласно атрибуту flex-gt-sm="25"

Kentonbmax · Answer 2 · 2016-06-06T13-15-00.000Z

div определяет строку для столбца и столбец для строки, где будет изгибаться вертикально для столбца и горизонтально для строки. Также неплохо, если вы хотите, чтобы большие дисплеи отображались как строки и меньше, чтобы показать как столбец для определения строки и использования макета-обертки. Кроме того, вы должны учитывать, как родительский (md-card) обрабатывает элементы.

Я стараюсь держаться подальше от макета-заполнить и использовать flex = "auto" для поддержки сафари. Надеюсь, это поможет.

Я не думаю, что вы на самом деле ответили на мой вопрос?