Flexbox 布局 – 表单

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