Скрипт: http://jsfiddle.net/hectooorr/dcwt3to2/
У меня 2 проблемы. Невозможно выровнять 2 контейнера рядом друг с другом. Невозможно получить согласованную ширину.
Первая проблема: как я могу получить 2 контейнера для выравнивания рядом друг с другом, когда они имеют ширину 50%? В моем сценарии ниже я всегда буду иметь два контейнера с шириной 50%. Когда я делаю это, мои контейнеры не выравниваются. Должны ли добавлять эти 2 в свой собственный ряд и добавлять 50% к одному и сгибать друг друга?
<div layout="row" layout-margin layout-fill layout-wrap class="custom-chart-list">
<div flex="100" class="custom-container">container 1: 100% width - why does this width exceed width of containers 2 and 3?</div>
<div flex="50">container 2: 50% width</div>
<div flex="50">container 3: 50% width</div>
<div flex="100" class="custom-container">100% width</div>
<div flex="50">container 4: 50% width</div>
<div flex="50">container 5: 50% width - Why won't this stack next to container 4?</div>
Вторая проблема: почему контейнер flex = "100" превышает ширину 2 контейнера с 50%? См. Пример ниже. Первая строка имеет гибкость 100. Второй контейнер имеет гибкость 50, а третий имеет только атрибут "flex".
Здесь мое исправление http://jsfiddle.net/hectooorr/etmpLnkv/
<md-content flex class="custom-main-content" md-scroll-y role="main">
<div layout="row" layout-align="space-around center" layout-wrap class="custom-flex-grid">
<div flex="100" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">test</div>
<div class="custom-footer">test</div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="100" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<div layout="row" layout-fill>
<div flex>
<h3>Title</h3>
</div>
<div flex="30">legend</div>
<div flex="30" flex-gt-lg="10">
<select class="form-control input-sm">
<option>Hours</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
</div>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
<div flex="50" class="custom-flex-grid-tile">
<div class="custom-flex-grid-tile-inner">
<div class="custom-header">
<h3>Title</h3>
</div>
<div class="custom-content">chart</div>
<div class="custom-footer"></div>
</div>
</div>
</div>
margin
данногоdiv
. чтобы переопределить его, удалитеmargin
какmargin:0px!important