您的位置 >>> 星想互聯 >>> 編程技術 >>> 響應式布局
Flexbox 布局的最簡單表單
點擊數:548  發布時間2018-12-19 16:51:46

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


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

一、<form> 元素

表單使用<form>元素。

<form></form> 

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

二、表單控件

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

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

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

根據標準,這兩個控件都是行內塊級元素(inline-block),也就是說,它們默認并排在一行上。

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

三、指定 Flexbox 布局

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

form { display: flex; } 

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

四、flex-grow 屬性

兩個地方值得注意。

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

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

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

input { flex-grow: 1; } 

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

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

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

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

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

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

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

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

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

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

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

  • flex-start:頂邊對齊,高度不拉伸
  • flex-end:底邊對齊,高度不拉伸
  • center:居中,高度不拉伸
  • stretch:默認值,高度自動拉伸

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

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

上面代碼中,<form>元素設置了align-items以后,就不用在控件上設置align-self,除非希望兩者的值不一樣。

來源:咸寧網站建設
日本高清成 人,A级高清毛片av无码,欧美成 人 免费在线播放-首页 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>