小提琴: http://jsfiddle.net/hectooorr/dcwt3to2/
我有两个问题。无法将2个容器彼此对齐。无法获得一致的宽度。
第一个问题: 如果两个容器的宽度均为50%,我怎样才能让2个容器彼此对齐?在下面的场景中,我总是有两个容器,每个容器的宽度为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%?见下面的例子。第一行的flex为100.第二个容器的flex为50,第三个容器只有'flex'属性。
答案 0 :(得分:0)
这是我的修复 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>