通過將容器設(shè)置為顯示：flex; flex-inp：包裝，.form__Item元素將出現(xiàn)并排，但是我們?nèi)匀恍枰M(jìn)行一些調(diào)整，以便當(dāng)容器變得太小時(shí)，它們會很好地堆疊。

>

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

好得多！但是，有多種方法可以使貓皮膚。

>

不幸的是，由于瀏覽器供應(yīng)商關(guān)注導(dǎo)致無限循環(huán)的潛力，因此該技術(shù)不可用。但是，一些聰明的人已經(jīng)編寫了插件來啟用此功能。

>基本
>元素查詢
> eq.js

>

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

>

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

>

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

>自己嘗試！

如果您有興趣查看我在自己的機(jī)器上使用此演示中所指的flexbox版本，則可以在Chrome中進(jìn)行以下操作：

>
1. >刷新此頁面，要么在新標(biāo)簽或窗口中打開任何網(wǎng)站，因此擴(kuò)展名啟動(dòng)。
在Chrome Developer工具中，
2. 在 tag中添加它：

3. <span><span>@media (max-width: 30em)</span> {
   </span>  <span><span>.form__item</span> {
   </span>    <span>float: none;
   </span>    <span>width: 100%;
   </span>  <span>}
   </span><span>}</span>

   >最后，添加：
內(nèi)的某個(gè)地方，您應(yīng)該看到我的訂閱表格自動(dòng)磨損。享受！

4. <span><span>.form</span> {
   </span>  <span>display: flex;
   </span>  <span>flex-wrap: wrap;
   </span><span>}
   </span>
   <span><span>.form__item</span> {
   </span>  <span>align-items: center;   
   </span>  <span>display: flex;
   </span>  <span>flex: 1 0 320px;
   </span>  <span>flex-wrap: wrap;
   </span>  <span>max-width: 100%;
   </span><span>}       
   </span>
   <span>label {
   </span>  <span>flex: 1 0 90px;
   </span><span>}
   </span>
   <span>input {
   </span>  <span>flex: 1 0 230px;
   </span>  <span>width: 100%;
   </span><span>}</span>

結(jié)論

>上面的方法實(shí)際上可以用于任何UI開發(fā)，但由于其可重復(fù)使用和可共享的性質(zhì)，它們特別適合響應(yīng)式的網(wǎng)絡(luò)組件。

>如果您在了解有關(guān)響應(yīng)式網(wǎng)絡(luò)設(shè)計(jì)的更多方面有趣 >響應(yīng)式Web組件上的經(jīng)常詢問問題（FAQ）

>