Flexbox 最简单的表单
弹性布局(Flexbox)逐渐流行,越来越多的人开始使用,因为它写Css布局真是太简单了一
一、<form>元素
表单使用<form>元素
<form></form>复制代码
上面是一个空的表单,根据HTML标准,它是一个块级元素,默认将占据整个宽度。高度为0,因为内部没有任何的内容。
二、表单控件
现在加入两个表单控件
<form><input type="email" name="email"/><button type="submit">Send</button>
<form>复制代码
上面代码中,表单包含一个输入框(input)和一个按钮(button)
根据HTML标准,这两个都是行内块级元素(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" name="email" /><button type="submit"><svg> <!-- a smiley icon --> </svg></button>
</form>复制代码
按钮插入图片后,它的高度发生了变化,变得更高了,这时候发生了一个奇妙的事情。
上图中按钮变高了,输入框也变得一样高!
前面说过,弹性布局默认不会改变项目的宽高,但是它默认改变项目的高度,如果项目没有显示指定高度,就将占据容器的所有高度,本例中,按钮变高了,导致表单元素也变高了,使得输入框的高度自动拉伸了。
align-self属性可以改变这个行为。
input {flex-grow: 1;align-self: center;
}复制代码
align-self 属性可取的四个值:
1.flex-start:顶边对齐,高度不拉伸
2.flex-end:底边对齐,高度不拉伸
3.center:居中,高度不拉伸
4.stretch:默认值,高度自动拉伸
如果项目很多,一个个地设置align-self属性很麻烦,这时可以在容器元素(本例是表单)设置align-items属性,它的值被所有子项目的align-self属性继承。
form {display: flex;align-items: center;
}复制代码
上面代码中,<form>元素设置了align-items以后,就不用在控件上设置align-self,除非希望两者的值不一样。
转载:http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html
Flexbox 最简单的表单相关推荐
- jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
- Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交
在Java EE应用编程中Servlet是基础,JSP是建立在Servlet基础之上的,其他Web框架如Struts.WebWork和Spring MVC都是基于Servlet的.本文主要讲述MyEc ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- JS正则表达式实现简单的表单验证(账号,密码,手机号)
首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号 我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功: 下面直 ...
- ExtJs简单form表单控件
ExtJs常用表单控件 2011-05-31 18:14 我们还是从最简单的代码实例开始吧: <!--html代码--> <body> <div id="for ...
- 编写简单php表单,用PHP做一个简单的表单
PHP最有用的特性之一是它能够自动将表单中的变量值赋予PHP变量.这使得表单处理变得非常快捷. 因此,假如你送出一个内含输入栏位值的表单如下: 当你用PHP处理此页面,$name变量的值就会是 Gle ...
- jQuery最简单的表单提交方式
第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...
- react实现简单的表单
安装 jspm bable gulp github jspm install react@0.14.0-rcl jspm install react-dom@0.14.0-rcl jspm insta ...
最新文章
- c语言删增,C语言中初始、增加和删除进程信号的操作方法简介
- Vue — 第三天(计算属性和json-server)
- Spring 3 RESTful Web服务
- mysql.zip免安装版配置
- ASP.Net中无刷新执行Session身份验证
- mac 查看指定端口情况 并杀死该进程
- mysql和oracle转换_转MySql 与Oracle区别
- Python – numpy.arange()
- Search in Rotated Sorted Array II leetcode java
- mysql垂直分库_mysql垂直分库,水平分库,垂直分表,水平分表
- 【C/C++ 】C++库类大全
- k3note Android8,价格只差100 乐檬K3 Note对比红米Note
- Laravel压缩图片
- 魔板(最小步数模型)
- 原子互换:一统公链江湖的神来之笔
- 数据资产运营 = 数据资产盘点 + 数据治理 + 数据价值实现
- 一文带你了解如何编辑工作流流程图
- FFmpeg4.0笔记:本地媒体文件解码、帧格式转换、重采样、编码、封装、转封装、avio、硬解码等例子...
- python 驻留机制
- 网吧服务器系统ghost,Ghost网络克隆详细步骤教程(适合网吧使用
热门文章
- 【C++grammar】C++类数据成员的初始化
- c ++递归算法数的计数_C ++程序使用数组中的递归查找数字的最后一次出现
- c#中重载单目运算符-_C#程序重载二进制运算符(-,*,/)
- java jar包示例_Java包getSpecificationVendor()方法和示例
- ffplay分析(从启动到读取数据线程插入到字幕、音频、视频解码前的队列操作)
- python制作词典_我的词典我做主!python3.5生成自己的词性词典
- 【1】C++面试题函数引用重载宏命名空间
- 正则表达式提取括号里面的值
- 判断一个字符串是否另一个字符串的右移后的
- SQL server 2008下载+安装详细