Flexbox 布局 – 表單

1、行內塊元素間隔

看一個效果：

<form><input type="email" name="email" placeholder="請輸入"><button>submit</button> </form> 復制代碼

效果圖：

input button 行內塊元素 并排在一行 并且兩個空間之間有 3 - 4 像素的間隔（瀏覽器內置樣式指定）

處理：

form {display: flex; } 復制代碼

彈性布局的項目（item）默認沒有間隔

2、 期望：輸入框占據當前行所有的剩余寬度

如圖效果：

CSS 代碼：

input { flex-grow: 1; } 復制代碼

效果如下：

3、解決 button 與 input 高度一致的問題

默認如圖：

如果改變 button 的高度，input 框也會隨著變高； 若想改變這種狀態的話，通過 align-self / align-items

input {/* 彈性布局默認不改變項目的寬度，但是默認改變項目的高度。如果項目沒有指定高度，將占據容器的所有高度。 eg: button 按鈕變高了，導致表單元素也變高了，使得輸入框的高度自動拉伸了 */align-self: auto | flex-start | flex-end | center | baseline | stretch; } 復制代碼

or:

form { align-items: center / flex-start / flex-end / stretch / baseline ;}復制代碼

center 的時候：

轉載于:https://juejin.im/post/5c36ec8351882523f0260116

總結

以上是生活随笔為你收集整理的Flexbox 布局 – 表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。