angularjs material Layout, Flex and Offset

1) I am trying to stretch the children divs to 60% and align it in the center but it is not working. I am using flex to stretch the size of the div to 60%. See example http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview

<div layout="column" layout-align="center">
<div style="background-color:#00A000;height: 40px;" flex="60">

</div>

<div style="background-color:#004444;height: 40px;" flex="60">

</div>

<div style="background-color:#0077b3;height: 40px;" flex="60">

</div>

2) In Angularjs Material document it is mentioned that "to customize the size and position of elements in a layout, use flex, offset, and flex-order attributes", I don't see an example of offset.

This is what you need to do..

<div layout="column" layout-align="center">
    <div layout="row" layout-align="center center">
      <div style="background-color:#00A000;height: 40px;" flex="60">
      </div>  
    </div>
    <div layout="row" layout-align="center center">
      <div style="background-color:#004444;height: 40px;" flex="60">
      </div>
    </div>
    <div layout="row" layout-align="center center">
      <div style="background-color:#0077b3;height: 40px;" flex="60">
      </div>
    </div>
</div>

Read more about layout here : https://material.angularjs.org/#/layout/grid