弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。
三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚。今天,我看到一篇教程,才意识到一个最简单的表单,就可以解释 Flexbox,而且内容还很实用。
下面,你只需要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
,除非希望两者的值不一样。
(完)
spark 说:
input 的 `align-items` 应该是 `align-self` 吧。
2018年10月18日 09:09 | # | 引用
dykingdy 说:
还是之前的文章比较详细系统。
2018年10月18日 09:18 | # | 引用
heee 说:
-------
flex-grow属性默认等于0,即使用本来的宽度,不拉伸。等于1时,就表示该项目宽度拉伸,占据当前行的所有剩余宽度。
-------
flex-grow的值是占据剩余空间的比例吧。觉得这个地方应该写的详细一点。
2018年10月18日 09:26 | # | 引用
韦大宝 说:
火钳留名!书签早就保留阮大神的Flex布局。
2018年10月18日 09:36 | # | 引用
阮一峰 说:
@spark:
这里确实写错了,已经更正。
2018年10月18日 09:41 | # | 引用
zlx 说:
align-items是给容器的,您的例子中
应该是align-self
2018年10月18日 09:44 | # | 引用
李星阳 说:
验证了一下,果然是!
2018年10月18日 10:06 | # | 引用
残心 说:
3年前您的文章不清楚么...
那是我flex布局的启蒙教程啊~~~
2018年10月18日 10:33 | # | 引用
寻找安多芬 说:
阮老师,什么时候可以讲一些 Grid 布局?
2018年10月18日 11:38 | # | 引用
周璇 说:
form元素设置display为flex后控件间还是会有间隙阿...怎么回事
2018年10月18日 13:44 | # | 引用
小互哦 说:
“两个控件之间有3像素~4像素的间隔,这是浏览器的内置样式指定的”这个说的不是很好,准确来说是自己代码导致的,它是标签换行引起的,显示是一个空格。所以当你这样处理时可以避免中间的空格:
1. 两个标签连在一起:Send
2. 给父标签 css 样式 font-size: 0 这样空格就没了。
3. 浮动、flex之类的,改变布局。
2018年10月18日 15:03 | # | 引用
FaiChou 说:
全文中唯一加粗的一句话:
「弹性布局默认不改变项目的宽度,但是它默认改变项目的高度。如果项目没有显式指定高度,就将占据容器的所有高度」
读起来, 理解起来, 没那么明了.. 所以说有些文档还是看英文的比较容易理解.
2018年10月18日 21:06 | # | 引用
Neil 说:
三年前的文章已经相当牛逼了,被各种博客教程抄袭转载已经说明了他的意义。
2018年10月19日 09:34 | # | 引用
wei 说:
align-items要换成align-self
---
阮大, 你前面那篇文章写的, align-items是flex容器属性..
2018年10月19日 18:06 | # | 引用
nelhu 说:
一如既往的言简意赅, 本次是对之前flex布局的补充, 明确了flex布局的部分默认值,align-self与align-items的关系。谢谢。读您的文章是我一天中最享受的时刻。
2018年10月22日 10:54 | # | 引用
Valar 说:
希望再出一些页面布局思路的文章。很喜欢!
脑洞不够,布局很头疼
2018年10月22日 21:54 | # | 引用
如斯 说:
看了看浏览器兼容,发现没几个能用的
2018年10月23日 11:36 | # | 引用
看看书 说:
移动端全部支持。什么年代了。还没几个浏览器支持?看看浏览器市场份儿?绝大部分chrome。国内几个浏览器全部是chrome内核的。
2018年10月26日 16:14 | # | 引用
热心市民 说:
大哥你活在90年代吗,现在浏览器基本都只看3个来做兼容,除非部分考虑到低版本ie,难道你开发用qq浏览器啊?360啊? 而且即使qq和360也用chrome的内核 移动端更是完全兼容,
2018年10月26日 17:48 | # | 引用
六六 说:
现场常用也就兼容 谷歌、火狐、IE11、safari就可以。
2018年10月27日 00:54 | # | 引用
丁毅峰 说:
阮老师,看了你的未来世界的幸存者,感觉很受用.希望老师可以多出一些类似的书籍
2018年10月29日 11:33 | # | 引用
Owen 说:
受益匪浅!
2018年10月29日 17:00 | # | 引用
Jlong 说:
可是实际项目中按钮和input框之间只有1像素边框
2018年11月 2日 16:56 | # | 引用
wbc 说:
阮老师您太谦虚了,三年前的博客是我看过最易懂的flex文章了,这篇文章虽然简短,也更能让人加深对flex的理解。建议初学者三篇博客结合着看,完美!!!
2018年11月18日 10:16 | # | 引用
lcy 说:
“可以看到,这两个控件之间有3像素~4像素的间隔,这是浏览器的内置样式指定的。” 这里的间隔是元素之间的空格产生的, 在父元素设置`font-size: 0;` 或者两个元素之间不要空格、换行 就不会产生间隔。 或许 “浏览器的内置样式” 就是这个意思?
2018年11月23日 09:27 | # | 引用
纳如 说:
这是活在90年代的节奏,flex都已经这么普及了...
2018年11月27日 17:46 | # | 引用
XieRuochen 说:
这就没了?
2018年12月 5日 17:06 | # | 引用
诺亚的雎鸠 说:
求通俗易懂的 grid 布局
2019年3月 9日 00:19 | # | 引用
phil 说:
align-self 可以取5个值,除了阮大说的4个以为,还有一个baseline
2019年5月 7日 17:23 | # | 引用