如何建立一個響應(yīng)表單隨著Flexbox的

在本教程中，深圳網(wǎng)站制作將學(xué)習(xí)如何利用優(yōu)勢實(shí)現(xiàn)Flexbox創(chuàng)建一個響應(yīng)的形式。 有趣（并在同一時間令人興奮）是實(shí)現(xiàn)Flexbox使我們能夠建立我們的表格，而無需使用任何媒體查詢。

在我們開始之前，讓我們來看看我們會向合作（簽較大的版本怎么看的形式布局更改）：

結(jié)構(gòu)形式

就在那時，第一件事首先，讓我們深入到窗體的結(jié)構(gòu)。 我們將如下標(biāo)記起來：

我們將使用.flex-outer無序列表將不同的表單元素
和.flex-inner無序列表到組的復(fù)選框。
幾乎所有的表單控件都與他們相關(guān)聯(lián)的標(biāo)簽。
而已！ 通過定義只是兩個無序列表（我們也可以使用有序列表也一樣），我們已經(jīng)建立了一個非常干凈的形式。 這里是什么樣子：

注 ：我們使用p元素，而不是label元素之前.flex-inner列表。 這是因?yàn)?，在這種特殊情況下，它沒有任何意義使用label標(biāo)記。 這個標(biāo)簽應(yīng)該只用于文本標(biāo)簽與表單控件相關(guān)聯(lián)。

下面是復(fù)選框標(biāo)記：

這會不會是你所見過的最高檔的形式，但它的工程！ 它的語義，訪問，并且液; 這可以說是比什么都重要的方面。
在這一點(diǎn)上，我們就可以開始應(yīng)用一些樣式給它。

表單樣式
讓我們開始加入規(guī)范和autoprefixer我們的筆設(shè)置：

下一步，我們將找出Flex容器。 在我們的例子中，以下要素：

每個列表項(xiàng).flex-outer列表。
該.flex-inner列表包含所有的復(fù)選框。
此外，我們希望垂直居中穿過十字軸的柔性物品。

為了實(shí)現(xiàn)這一行為，我們設(shè)置了一些初步的CSS規(guī)則：

下一步驟是為柔性物品指定的寬度。 我們開始與的柔性物品.flex-outer列表。

主要要求：

標(biāo)簽的寬度應(yīng)至少為120像素并且至多220px。
形式元素的標(biāo)簽之后而來的寬度應(yīng)至少220px。
這是什么給我們？ 與其相關(guān)的表單元素以及每個標(biāo)簽將在同一水平行，當(dāng)窗體總數(shù)的寬度至少340px顯示。 在任何其他情況下，所有的表單元素（除了正如我們將看到一個時刻的復(fù)選框）將垂直堆疊。

注 ：上述值是任意的，你可以根據(jù)自己的需要進(jìn)行修改。

注意最后兩個柔性件的取向。 如果由于某種原因，你不喜歡的布局和你喜歡它們彼此相鄰出現(xiàn)，你可以嘗試這樣的事：

取下justify-content從Flex包裝財產(chǎn)。
使用百分比為固定寬度添加到撓曲件（例如width: 50%
使用媒體查詢重寫此寬度。 例如，當(dāng)視口寬度大于992px越大，給柔性件width: 25%而不是width: 50%
最重要的是，了解兩件事情是很重要的：

Flexbox的給了我們很大的靈活性，快速構(gòu)建優(yōu)美的形式
和所有的上述的值對于此特定實(shí)施例很好地工作。 對于自己的設(shè)計，你可能需要不同的值。 例如，復(fù)選框這里的標(biāo)簽是非常小的，為此我們給他們的父母一個固定的寬度（即100像素）。 但是，如果它們具有不同的寬度，這可能是聰明給他們flex: 1 100px 。

最終樣式
我們離開之前，讓我們添加更多的美感，使事情更像樣。 除了挑選的CSS標(biāo)簽在下面的例子中看到的顏色和間距已添加：

2016年新的電子商務(wù)趨勢要提高你的在線策略
深圳網(wǎng)站制作如何優(yōu)化你的網(wǎng)站速度

結(jié)論

正如你所看到的，用最少的標(biāo)記和Flexbox的的力量，我們設(shè)法建立一個負(fù)責(zé)任的形式。 希望現(xiàn)在，你已經(jīng)獲得了一些有用的知識，將幫助你建立你自己的Flexbox的形式。