html - 字段有效时 Angular Material 形式缩小

我用角形材料做接触形式。但是，当前两个元素中的任何一个和这两个元素都有效时，窗体的宽度将缩小。因此，当主题有效时，表单收缩，当电子邮件有效时，表单再次收缩。当窗体是行和列时，它会收缩。
我发现解决这个问题的一种方法是在form元素上加上flex，但这会导致表单填充整个页面宽度，这是不可取的。我也在它上面和下面弯曲了form和span元素，但它只是使表单比这两个字段有效时更容易被压扁。

<div layout="column" layout-gt-md="row" layout-align="start center" layout-align-gt-md="center start">
<form name="contactForm">
    <div layout="row" layout-align="space-between center">
        <div>
            <h3>Contact Form</h3>
            <span>Fill out the contact form to send me an email.</span>
        </div>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Subject</label>
            <input minlength="5" md-maxlength="30" required name="subject" ng-model="contact.subject" />
            <div class="hint">Give your message a subject.</div>
            <div ng-messages="contactForm.subject.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The subject has to be between 5 and 30 characters long.</div>
            </div>
        </md-input-container>
        <div flex="5" show-gt-md>
            <!-- Spacer //-->
        </div>
        <md-input-container class="md-block" flex>
            <label>Client Email</label>
            <input required name="email" ng-model="contact.email"
                   minlength="10" md-maxlength="100" ng-pattern="/^.+@.+\..+$/" />
            <div class="hint">What email should I reply to?</div>
            <div ng-messages="contactForm.email.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                    Your email must be between 10 and 100 characters long and be a valid email address.
                </div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Body</label>
            <textarea name="body" ng-model="contact.body" required minlength="15" md-maxlength="1500" rows="5"></textarea>
            <div class="hint">What would you like to message me about?</div>
            <div ng-messages="contactForm.body.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The body must be between 15 and 1500 characters long.</div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <span flex></span>
        <md-button class="md-raised" ng-disabled="contactForm.$invalid"><md-icon class="material-icons">mail_outline</md-icon>Send</md-button>
    </div>
</form>
</div>

编辑
目前，我已经解决了css媒体查询的问题，但我不希望这样做。

@media screen and (min-width: 960px) {
    form {
        width: 610px;
    }
}

@media screen and (max-width: 959px) {
    form {
        width: 400px;
    }
}

编辑
Codpen已添加

最佳答案

您正在使用start center布局与column对齐。现在center在许多情况下对齐会产生不希望的结果。所以最好使用<span flex></span>将require元素居中。例如。

 <div layout="row">
    <span flex></span>
    <div>
      <h3>Contact Form</h3>
      <span>Fill out the contact form to send me an email.</span>
    </div>
    <span flex></span>
  </div>

所以请查看下面的链接，以查看工作示例。
http://codepen.io/next1/pen/YqRVWo