使用CSS / Flex以不同方式對齊項目

Question

我正在制作表格。 我想使<h>標記在文本字段的開始對齊，並使文本字段位於中心。 但是，textfield和<h>標記現在都在中心對齊。 如何按預期對齊它們？

    <div class="vertical-offset--small inner-contact" style="display:flex; flex-direction: column; align-items: center; justify-content: center">



            <h5 style="display:inline">* First Name:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="first_name" name="first_name" ng-model="formData.first_name" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* Last Name:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="last_name" name="last_name" ng-model="formData.last_name" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* Email:</h5>
            <input type="text" class="form-control textfield-control textfield" ng-class id="email" name="email" ng-model="formData.email" style="width: 90%" ng-blur="realtimeSave()" required>
            <br>

            <h5>* My Question:</h5>
            <textarea id="question" name="question" ng-model="formData.question" ng-blur="realtimeSave()" style="width: 90%; height: 150px;" class="form-control textfield-control textfield" required>
            </textarea>
            <br>
            <br>
            <br>

            <div style="text-align:center">
                <button ng-click="sendEmail($event)" class="button button-form-success button--primary">
                    Submit
                </button>
            </div>
    </div>

在div上，我調用以下樣式：

 style="display:flex; flex-direction: column; align-items: center; justify-content: center"

Answer 1

在每個tags ，添加以下樣式：

h5.tag {
  align-self: flex-start;
}

請參見此代碼段中的示例：

 h5.tag { align-self: flex-start; } 

 <div class="vertical-offset--small inner-contact" style="display:flex; flex-direction: column; align-items: center; justify-content: center"> <input type="hidden" name="_subject" value="Submission from FoundVisa!" /> <h5 style="display:inline">* First Name:</h5> <input type="text" class="form-control textfield-control textfield" ng-class id="first_name" name="first_name" ng-model="formData.first_name" style="width: 90%" ng-blur="realtimeSave()" required> <br> <h5>* Last Name:</h5> <input type="text" class="form-control textfield-control textfield" ng-class id="last_name" name="last_name" ng-model="formData.last_name" style="width: 90%" ng-blur="realtimeSave()" required> <br> <h5>* Email:</h5> <input type="text" class="form-control textfield-control textfield" ng-class id="email" name="email" ng-model="formData.email" style="width: 90%" ng-blur="realtimeSave()" required> <br> <h5>* My Question:</h5> <textarea id="question" name="question" ng-model="formData.question" ng-blur="realtimeSave()" style="width: 90%; height: 150px;" class="form-control textfield-control textfield" required> <div style="text-align:center"> <button ng-click="sendEmail($event)" class="button button-form-success button--primary"> Submit </button> </div> </div>