Flexbox 布局的最簡單表單

2022-01-30 11:37:37 字數 2353 閱讀 3574

作者 | 阮一峰

** |

彈性布局(flexbox)逐漸流行,越來越多人使用,因為它寫 css 布局真是太方便了。

三年前,我寫過 flexbox 的介紹(上,下),但是有些地方寫得不清楚。今天,我看到一篇教程,才意識到乙個最簡單的表單,就可以解釋 flexbox,而且內容還很實用。

下面,你只需要10分鐘,就可以學會簡單的表單布局。

一、

上面是乙個空表單。根據 html 標準,它是乙個塊級元素,預設將佔據全部寬度,但是高度為0,因為沒有任何內容。

二、表單控制項

現在,加入兩個最常用的表單控制項。

上面**中,表單包含乙個輸入框()和乙個按鈕()。

根據標準,這兩個控制項都是行內塊級元素(inline-block),也就是說,它們預設併排在一行上。

上圖是瀏覽器對這個表單的預設渲染(顏色除外),可以看到,這兩個控制項之間有3畫素~4畫素的間隔,這是瀏覽器的內建樣式指定的。

三、指定 flexbox 布局

接著,指定表單使用 flexbox 布局。

form

可以看到,兩個控制項之間的間隔消失了,因為彈性布局的專案(item)預設沒有間隔。

四、flex-grow 屬性

兩個地方值得注意。

(1)兩個控制項元素的寬度沒有發生變化,因為彈性布局預設不改變專案的寬度。

(2)彈性布局預設左對齊,所以兩個控制項會從行首開始排列。

如果我們希望,輸入框佔據當前行的所有剩餘寬度,只需要指定輸入框的flex-grow屬性為1。

input

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

flex-grow屬性預設等於0,即使用本來的寬度,不拉伸。等於1時,就表示該專案寬度拉伸,佔據當前行的所有剩餘寬度。

五、align-self 屬性和 align-items 屬性

我們做一點改變,在按鈕裡面插入一張。

按鈕插入後,它的高度變了,變得更高了。這時,就發生了一件很奇妙的事情。

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

前面說過,彈性布局預設不改變專案的寬度,但是它預設改變專案的高度。如果專案沒有顯式指定高度,就將佔據容器的所有高度。 本例中,按鈕變高了,導致表單元素也變高了,使得輸入框的高度自動拉伸了。

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

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

如果專案很多,乙個個地設定align-self屬性就很麻煩。這時,可以在容器元素(本例為表單)設定align-items屬性,它的值被所有子專案的align-self屬性繼承。

form

上面**中,元素設定了align-items以後,就不用在控制項上設定align-self,除非希望兩者的值不一樣。

Flexbox 布局的最簡單表單

日期 2018年10月18日 彈性布局 flexbox 逐漸流行,越來越多人使用,因為它寫 css 布局真是太方便了。三年前,我寫過 flexbox 的介紹 上,下 但是有些地方寫得不清楚。今天,我看到一篇教程,才意識到乙個最簡單的表單,就可以解釋 flexbox,而且內容還很實用。下面,你只需要1...

Flexbox 布局的最簡單表單的實現

彈性布局 flexbox 逐漸流行,越來越多人使用,因為它寫 css 布局真是太方便了。三年前,我寫過 flexbox 的介紹 上,下 但是有些地方寫得不清楚。今天,我看到一篇 教程 才意識到乙個最簡單的表單,就可以解釋 flexbox,而且內容還很實用。下面,你只需要10分鐘,就可以程式設計客棧學...

簡單的表單布局

此篇博文的重點不是布局,只是單純的記錄下自己一直忽視的知識點。效果圖與下圖類似,只是沒有滾動條。剛開始,本人想到用form表單做,程式如下 html html head lang en meta charset utf 8 title title link rel stylesheet href e...