兩個固定大小列3列布局AngularJS材料

Question

我有類似這樣的Flexbox - two fixed width columns, one flexible

一個疑問，一個是關於使用只是實現Flexbox這樣做。我正在嘗試使用AngularJS Material。我想我的左右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

撓曲屬性值被限制爲33，66，和五的倍數。 例如：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>