如何實現(xiàn)Flexbox 布局？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

一、

上面是一個空表單。根據(jù) HTML 標準，它是一個塊級元素，默認將占據(jù)全部寬度，但是高度為0，因為沒有任何內(nèi)容。

二、表單控件

現(xiàn)在，加入兩個最常用的表單控件。

  
  Send

上面代碼中，表單包含一個輸入框（ ）和一個按鈕（ ）。

根據(jù)標準，這兩個控件都是行內(nèi)塊級元素（inline-block），也就是說，它們默認并排在一行上。

上圖是瀏覽器對這個表單的默認渲染（顏色除外），可以看到，這兩個控件之間有3像素～4像素的間隔，這是瀏覽器的內(nèi)置樣式指定的。

三、指定 Flexbox 布局

接著，指定表單使用 Flexbox 布局。

form  {
  display: flex;
}

可以看到，兩個控件之間的間隔消失了，因為彈性布局的項目（item）默認沒有間隔。

四、flex-grow 屬性

兩個地方值得注意。

（1）兩個控件元素的寬度沒有發(fā)生變化，因為彈性布局默認不改變項目的寬度。

（2）彈性布局默認左對齊，所以兩個控件會從行首開始排列。

如果我們希望，輸入框占據(jù)當前行的所有剩余寬度，只需要指定輸入框的flex-grow 屬性為1 。

input  {
  flex-grow: 1;
}

上圖中，按鈕的寬度沒變，但是輸入框變寬了，等于當前行的寬度減去按鈕的寬度。

flex-grow 屬性默認等于0 ，即使用本來的寬度，不拉伸。等于1 時，就表示該項目寬度拉伸，占據(jù)當前行的所有剩余寬度。

五、align-items 屬性

我們做一點改變，在按鈕里面插入一張圖片。

按鈕插入圖片后，它的高度變了，變得更高了。這時，就發(fā)生了一件很奇妙的事情。

上圖中，按鈕變高了，輸入框也自動變得一樣高了！

前面說過， 彈性布局默認不改變項目的寬度，但是它默認改變項目的高度。如果項目沒有顯式指定高度，就將占據(jù)容器的所有高度。 本例中，按鈕變高了，導致表單元素也變高了，使得輸入框的高度自動拉伸了。

align-items 屬性可以改變這種行為。

input {
  flex-grow: 1;
  align-self: center;
}

align-items 屬性可以取四個值。

• flex-start：頂邊對齊，高度不拉伸

• flex-end：底邊對齊，高度不拉伸

• center：居中，高度不拉伸

• stretch：默認值，高度自動拉伸

如果項目很多，一個個地設(shè)置align-self屬性就很麻煩。這時，可以在容器元素（本例為表單）設(shè)置align-items屬性，它的值被所有子項目的align-self屬性繼承。

form {
display: flex;
align-items: center;
}

看完上述內(nèi)容，你們掌握如何實現(xiàn)Flexbox 布局的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！