如何使用flexbox創建自定義窗體？

我正在嘗試使用flexbox創建一個form，它將包含兩行代碼。如何使用flexbox創建自定義窗體？

在第一個，所有的inputs和內容將被顯示。在第二個，我想顯示提交button。

+----------------+--------------------------+ 
| CONTENT  |   INPUTS   | 
+----------------+--------------------------+ 
|    SUBMIT BUTTON    | 
+-------------------------------------------+

這裏是我的代碼：

html, body{ 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#content{ 
 
    display: flex; 
 
} 
 
#divInside{ 
 
    position: relative; 
 
    width: 200px; 
 
    height: 155px; 
 
    text-align: center; 
 
    background-color: red; 
 
    color: white; 
 
    margin: 10px; 
 
} 
 

 
#customForm{ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#wrapperName{ 
 
    flex: 1; 
 
}

<div id="content"> 
 
    <form id="customForm" action="whatever" method="post"> 
 
    <div id="divInside"></div> 
 
    <div id="wrapperName"> 
 
     <input class="textForm" type="text" name="name" placeholder="Name"><br> 
 
     <input class="textForm" type="text" name="description" placeholder="Description"><br> 
 
    </div> 
 
    <input id="buttonLogin" type="submit" value="Submit"> 
 
    </form> 
 
</div>

我試圖包裹在一個DIV和內容在另一個inputs填寫完整的線，但是，作爲第一個div（ #divInside）有一個固定的width，我不知道如何使其他div（#wrapperName）填充行的其餘部分，並強制button移動到下一個線。

如何強制button到下一行？

在此先感謝！

來源

2016-05-17 Francisco Romero

只有flex屬性，佈局相對簡單。無需CSS定位屬性。

#customForm { 
 
    display: flex;    /* primary flex container */ 
 
    flex-wrap: wrap;   /* enable flex items to wrap */ 
 
} 
 
#divInside { 
 
    width: 200px; 
 
    height: 155px; 
 
    background-color: red; 
 
    color: white; 
 
    margin-right: 10px; 
 
    display: flex;    /* nested flex container (for text alignment demo) */ 
 
    justify-content: center;  /* center text (optional) */ 
 
    align-items: center;   /* center text (optional) */ 
 
} 
 
#wrapperName { 
 
    flex: 1;      /* consume all available space in the line */ 
 
    display: flex;    
 
    flex-direction: column;  /* stack flex items vertically */ 
 
    justify-content: center;  /* vertical alignment */ 
 
} 
 
#buttonLogin { 
 
    flex-basis: 100%;   /* force button to its own line; take full width */ 
 
}

<form id="customForm" action="whatever" method="post"> 
 
    <div id="divInside">Content</div> 
 
    <div id="wrapperName"> 
 
    <input class="textForm" type="text" name="name" placeholder="Name"> 
 
    <input class="textForm" type="text" name="description" placeholder="Description"> 
 
    </div> 
 
    <input id="buttonLogin" type="submit" value="Submit"> 
 
</form>

來源

2016-05-17 23:06:29

位置屬性是與'absolute'定位對準內容DIV中的一些元素（這裏我減少代碼量）。謝謝你的回答！這與我所尋找的相似，但不完全相同。無論如何，隨着你的解決方案，你讓我清楚我的想法，並得到它:) –

不客氣。您可以通過啓用容器上的「包裝」並使項目太寬以適合當前行來強制Flex項目到下一行。 –

是的，我以前用過它，但我忘了它。再次感謝您拯救我的生命:) –

變化：

感動提交按鈕出#customForm

製造#wrapperName

#wrapperName { 
flex: 1; 
display: flex; 
flex-flow: column wrap; 
align-items: space-around; 
justify-content: center; 
}

刪除#content款式。
添加了屬性form="customForm"，因此它屬於表單之外的表單。

藍色虛線輪廓和對邊框和顏色的視覺更改僅用於視覺輔助，並非必要。

html, body{ 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#content{ 
 

 
} 
 
#divInside{ 
 
    position: relative; 
 
    width: 200px; 
 
    height: 155px; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
    background: rgba(255,0,0,.4); 
 
    color: white; 
 
    margin: 10px; 
 
} 
 

 
#customForm{ 
 
    display: flex; 
 
    justify-content: center; 
 
    outline: 1px dashed blue; 
 
    
 
} 
 

 
#wrapperName{ 
 
    flex: 1; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: space-around; 
 
    justify-content: center; 
 
}

<div id="content"> 
 
    <form id="customForm" action="whatever" method="post"> 
 
    <div id="divInside"></div> 
 
    <div id="wrapperName"> 
 
     <input class="textForm" type="text" name="name" placeholder="Name"><br> 
 
     <input class="textForm" type="text" name="description" placeholder="Description"><br> 
 
    </div> 
 
    
 
    </form> 
 
    <input id="buttonLogin" type="submit" value="Submit" form="customForm"> 
 
</div>

來源

2016-05-17 23:08:55 zer00ne

如何使用flexbox創建自定義窗體？

回答

相關問題