angular-material - AngularJS Material中3列布局中的两个固定大小的列

Question

我有一个类似于这个Flexbox 的问题 - 两个固定宽度的列，一个灵活的

但那是关于仅使用 Flexbox 来完成的。我正在尝试使用 AngularJS 材料。我希望我的左右 div 是固定的 28px 宽度，并且中心 div 可以弯曲。

像这样的东西：

<div layout="row" layout-margin>
  <!-- Alphabet - First Half -->
  <div flex="28px">
    <md-list>
      <md-list-item>
        <md-button class="md-fab md-mini">
          <div align="center">A</div>
        </md-button>
      </md-list-item>
    </md-list>
  </div>

  <div flex>
    <md-content></md-content>
  </div>

  <!-- Alphabet - Second Half -->
  <div flex="28px">
    <md-list>
      <md-list-item>
        <md-button class="md-fab md-mini">
          <div align="center">N</div>
        </md-button>
      </md-list-item>
    </md-list>
  </div>
</div>

Answer 1

flex 属性值限制为 33、66 和 5 的倍数。例如：flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....

尝试这个

<div layout="row" layout-margin>

  <div flex="25">
   <md-list>
     <md-list-item>
       <md-button class="md-fab md-mini">
         <div align="center">A</div>
       </md-button>
     </md-list-item>
   </md-list>
  </div>

 <div flex>
   <md-content></md-content>
 </div>


 <div flex="25">
   <md-list>
     <md-list-item>
       <md-button class="md-fab md-mini">
          <div align="center">N</div>
      </md-button>
     </md-list-item>
   </md-list>
 </div>
</div>