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 布局 – 表单相关推荐

Bootstrap表单的可选布局
Bootstrap还提供了 3 个辅助类 .form-search..form-inline..form-horizontal,用来实现搜索表单.行内表单.水平布局的表单. 1.搜索表单为 < ...
垂直布局的HTML表单
对于比较复杂的表单,要填写的内容相对较多,采用水平布局显然不合适.因此,垂直布局的表单更加常用.垂直对齐的表单中,标签和输入框可以使用三种对齐方式,包括顶对齐.左对齐和右对齐. 顶对齐可以缩短用户填写 ...
android 漂亮的表单界面,面向ArcGIS for Android的表单界面生成器的设计与实现
孙俊英陈忠超摘要:基于ArcGIS for Android的采集系统作为当下主要的野外采样方式之一,被广泛的应用于各类场景,针对不同采集内容,采集系统的主要差异在于采样的属性数据所有不同,使用传 ...
antd 的form 表单怎么回显数据_jsonschema-form-vue基于JSONSchema的表单自动生成方案
现象作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作: 编写模板编写校验规则 * 获取数据,提交表单同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后 ...
网页没有横向滚动条_【第四课】网页里的表单
前言从零开始学前端系列课程,与传统的视频大课堂教学不同,没有填鸭:也普通做练习题的方式不同,没有假想的模拟题. 本课程拆出80个左右必须掌握的技能点,并对其分组,从易到难地列出学习曲线.同时从真实项 ...
antd vue form 手动校验_jsonschema-form-vue基于JSONSchema的表单自动生成方案
现象作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作: 编写模板编写校验规则 * 获取数据,提交表单同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后 ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
MiniUI快速入门教程（四）表单开发
表单开发包括:布局.验证.加载.提交.清除.重置等. 效果图如下: 表单布局使用HTML Table标签实现任意丰富的表单布局: <table class="form-table&q ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...

Flexbox 布局 – 表单

Flexbox 布局 – 表单

1、行内块元素间隔

2、期望：输入框占据当前行所有的剩余宽度

3、解决 button 与 input 高度一致的问题

Flexbox 布局 – 表单相关推荐

最新文章

热门文章

Flexbox 布局 – 表单

Flexbox 布局 – 表单

1、行内块元素间隔

2、 期望：输入框占据当前行所有的剩余宽度

3、解决 button 与 input 高度一致的问题

Flexbox 布局 – 表单相关推荐

最新文章

热门文章

2、期望：输入框占据当前行所有的剩余宽度