材料设计网格宽度未对齐答案

【问题标题】：Material Design Grid Widths not aligning up材料设计网格宽度未对齐
【发布时间】：2015-12-25 03:09:42
【问题描述】：

小提琴： 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' 属性。

【问题讨论】：

发生这种情况是因为margin 被分配给了div。要覆盖它，请删除 margin 之类的 margin:0px!important
@Amitsingh 我仍然想保留每个容器周围的边距。

标签： angularjs material-design angular-material angular-grid

【解决方案1】：

这是我的修复 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>

【讨论】：