我想使用Flexbox創建如下圖所示的表單佈局。包含的示例是我正在構建的投資組合網站的模擬。使用Flexbox的CSS 2列表佈局
這是我的表單代碼，我嘗試了很多不同的方式讓它看起來像使用Flexbox的模擬，但沒有成功。感謝您的幫助！
<form>
<input type="text" placeholder="Your Name*">
<textarea placeholder="Type your message here..."></textarea>
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
<input type="submit" value="SEND!">
</form>
與現有的標記，你可以使用flexbox列布局。
使孩子們佔用的空間要如何主要設置是：
flex-container需要的高度，這裏60vh，所以柔性項目知道在哪裏以及如何打破流動
留言textarea具有100％的高度，這使得它打破流動並且獲得全高
主題textarea具有flex: 1，這使得它獲得可用空間左
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 60vh;
border: 1px solid black;
padding: 10px 5px;
box-sizing: border-box;
}
.flex-container * {
width: calc(50% - 10px);
margin: 0 5px;
box-sizing: border-box;
}
.flex-container :nth-child(2),
.flex-container :nth-child(3) {
margin-top: 5px;
}
.flex-container :nth-child(3) {
flex: 1;
}
.flex-container :nth-child(4) {
height: 100%;
}<form class="flex-container">
<input type="text" placeholder="Your Name*">
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
<textarea placeholder="Type your message here..." rows="7"></textarea>
</form>如果你可以改變的標記和/或不希望設置一個高度上flex-container，你可以添加一個row佈局上述樣品
其主要設置爲：
flex-container，取出flex-direction: column所以它的方向是row
添加一個包裝圍繞輸入的並受textarea
.flex-container {
display: flex;
border: 1px solid black;
padding: 10px 5px;
}
.flex-wrapper {
display: flex;
flex-direction: column;
}
.flex-container > * {
flex: 1;
min-height: 50vh;
margin: 0 5px;
}
.flex-wrapper :nth-child(2),
.flex-wrapper :nth-child(3) {
margin-top: 5px;
}
.flex-wrapper :nth-child(3),
.flex-container > textarea {
flex: 1;
}<form class="flex-container">
<div class="flex-wrapper">
<input type="text" placeholder="Your Name*">
<input type="text" placeholder="Your E-Mail Address*">
<textarea placeholder="Subject"></textarea>
</div>
<textarea placeholder="Type your message here..." rows="7"></textarea>
</form>謝謝，我真的很感謝你投入這個時間。 – DougLuce
如果你可以修改HTML，你可以添加包裝（左/右彎曲）和CSS變成容易（我認爲）
<form class="flex-container">
<div class="flex left">
<input type="text" placeholder="Your Name*"><br>
<input type="text" placeholder="Your E-Mail Address*"><br>
<textarea placeholder="Subject"></textarea>
</div>
<div class="flex right">
<textarea placeholder="Type your message here..." rows="7"></textarea>
</div>
</form>
，然後你需要這個CSS也容納了非常小的屏幕小於400像素（響應式設計）...調節媒體查詢自己的喜好
.flex {
padding: 10px;
}
.flex input,
.flex textarea {
width: 100%;
}
@media (max-width: 400px) {
.flex input,
.flex textarea {
margin-top: 10px;
margin-bottom: 10px;
}
}
@media (min-width: 400px) {
.flex-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:column;
padding: 10px;
}
.left {
width: 40%;
}
.right {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 60%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
}
感謝！ – DougLuce
顯示您的CSS代碼也... – Sunny
您可以嘗試使用窗體屬性...看看這裏。 HTTP：//計算器。com/questions/6644128/html-input-field-form-of-form – Daniel
我真的沒有和我的CSS相提並論，所以我認爲我沒有足夠的資源來發布它。我已經嘗試了flex容器中的前3個輸入元素，設置了wth flex-flow：column。對於前三者來說，這種方式沒有問題，但是在那邊找到合適的消息框一直是個挑戰。 – DougLuce