如何實(shí)現(xiàn)Flexbox 布局

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

一、<form> 元素

表單使用 <form> 元素。

<form></form>

上面是一個(gè)空表單。根據(jù) HTML 標(biāo)準(zhǔn)，它是一個(gè)塊級(jí)元素，默認(rèn)將占據(jù)全部寬度，但是高度為0，因?yàn)闆]有任何內(nèi)容。

二、表單控件

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

<form>
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>

上面代碼中，表單包含一個(gè)輸入框（ <input> ）和一個(gè)按鈕（ <button> ）。

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

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

三、指定 Flexbox 布局

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

form  {
  display: flex;
}

可以看到，兩個(gè)控件之間的間隔消失了，因?yàn)閺椥圆季值捻?xiàng)目（item）默認(rèn)沒有間隔。

四、flex-grow 屬性

兩個(gè)地方值得注意。

（1）兩個(gè)控件元素的寬度沒有發(fā)生變化，因?yàn)閺椥圆季帜J(rèn)不改變項(xiàng)目的寬度。

（2）彈性布局默認(rèn)左對(duì)齊，所以兩個(gè)控件會(huì)從行首開始排列。

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

input  {
  flex-grow: 1;
}

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

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

五、align-items 屬性

我們做一點(diǎn)改變，在按鈕里面插入一張圖片。

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg>  <!-- a smiley icon -->  </svg></button>
</form>

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

上圖中，按鈕變高了，輸入框也自動(dòng)變得一樣高了！

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

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

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

align-items 屬性可以取四個(gè)值。

• flex-start：頂邊對(duì)齊，高度不拉伸

• flex-end：底邊對(duì)齊，高度不拉伸

• center：居中，高度不拉伸

• stretch：默認(rèn)值，高度自動(dòng)拉伸

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

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

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