1

I have a question similar to this one Flexbox - two fixed width columns, one flexible

But that one is about doing it using just Flexbox. I'm trying to use AngularJS Material. I want my left and right divs to be a fixed 28px width, and the center div to flex.

Something like this:

<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>
Community
  • 1
  • 1
pixelwiz
  • 623
  • 1
  • 11
  • 20

1 Answers1

1

The flex attribute value is restricted to 33, 66, and multiples of five. For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....

Try this 

<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>
nitin
  • 3,747
  • 2
  • 24
  • 31
  • Thanks, but does that make it 25% for the left and right column? I'm trying to get my left and right columns to always be the same size and always be in place, and just flex the middle. – pixelwiz Apr 10 '15 at 13:04