将 div 居中，flex = 33答案

【问题标题】：Center a div with flex = 33将 div 居中，flex = 33
【发布时间】：2016-06-19 11:42:30
【问题描述】：

感谢您查看我的问题。我有一个横向扩展页面的 div，这就是我想要的。我在 div 中有 4 个按钮，我正在使用：

<div layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap >

哪个好。然而，它占据了整个 div，所以按钮看起来很尴尬。所以我添加了flex="33"，现在它们被隔开，但只使用了我想要的页面的三分之一，它看起来不错。我遇到的问题是它占据了前三分之一，我希望它用完页面的第二个三分之一。有没有办法在不创建不必要的 div 占据前三分之一的情况下做到这一点？

完整代码如下：

<div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
    <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
        <label>{{button.div}}</label>
        <span></span>
        <md-icon md-svg-src="{{button.icon}}"></md-icon>
    </div>
</div>

我还没有任何 CSS。

图片：

之前flex=33

添加后：

【问题讨论】：

我们需要在工作演示中输出 HTML 和基本 CSS。
也就是说，flex="33" 可能与宽度有关（我不熟悉我*认为是 Angular 表示法。）...不是居中。根据我对flexbox 的了解，我怀疑问题出在layout-align="space-around center" 中的 space-around

标签： html css responsive-design flexbox angularjs-material

【解决方案1】：

您可以通过使用flex-offset="33" 或在父级上添加layout-align="center" layout="row" 来实现。我可能会使用第二个。

<div div layout="row" flex-offset="33">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

或

<div layout="row" layout-align="center">
    <div flex="33" layout="row" layout-align="space-around center" layout-sm="column" layout-fill layout-wrap class="pageNavButtons">
        <div ng-repeat="button in navPage" layout="column" layout-align="center center" style="color: #ffffff">
            <label> {{button.div}}</label>
            <span>----- </span>
            <md-icon md-svg-src ={{button.icon}}></md-icon>
        </div>
    </div>
</div>

http://codepen.io/kuhnroyal/pen/mPVdRK

【讨论】：