Javascript AngularJS 材料布局 - flex 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28442178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS material layout - issues with flex
提问by vlio20
I have a problem setting the flex properties of my layout. Here is a plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview
我在设置布局的 flex 属性时遇到问题。这是一个plunker：http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/preview
<md-content flex layout="row" layout-align="center">
<div layout="column">
<div flex layout="column" layout-fill>
<div flex="33">
<md-input-container>
<label>Enter Room's Name</label>
<input ng-model="test" placeholder="Enter Room's Name">
</md-input-container>
</div>
<div flex="66">
<md-button class="md-raised md-accent">
Create Chat Room
</md-button>
</div>
</div>
</div>
</md-content>
Here is the link to documentation: https://material.angularjs.org/#/layout/grid
这是文档的链接：https: //material.angularjs.org/#/layout/grid
The issue that the flex property of the input (text) and input (button) are not obeying the flex attribute.
输入（文本）和输入（按钮）的 flex 属性不服从 flex 属性的问题。
What I am trying to achieve is something like that:
我想要实现的是这样的：
回答by dsteve
here is the result after I tried it,
这是我试过之后的结果
hopefully it helps:
希望它有帮助：
<md-content layout="row" layout-align="center">
<div layout="column">
<div flex layout="column" layout-fill> <!-- this is what I change -->
<div flex="33">
<md-input-container>
<label>Enter Room's Name</label>
<input ng-model="test" placeholder="Enter Room's Name">
</md-input-container>
</div>
<div flex="66">
<md-button class="md-raised md-accent">
Create Chat Room
</md-button>
</div>
</div>
</div>
</md-content>
