专栏首页杰的记事本Flexbox在表单布局的应用

Flexbox在表单布局的应用

一、<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,除非希望两者的值不一样。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flex 布局两篇教程之一

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易...

    javascript.shop
  • Javascript 严格模式 “use strict”

    除了正常运行模式,ECMAscript 5添加了第二种运行模式:“严格模式”(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件...

    javascript.shop
  • Flex 布局两篇教程之二

    我只列出代码,详细的语法解释请查阅《Flex 布局两篇教程之一》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。

    javascript.shop
  • Flexbox 布局的最简单表单

    弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

    ruanyf
  • Centos7 安装配置Mysql

      Centos7默认自带的mariadb数据库,它是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,...

    阿豪聊干货
  • python实现多任务解析

    章鱼喵
  • 101-多进程基础

    fork()后会出现子进程,父子进程都打印Hello World!,所以会有两行相同的内容输出。

    凯茜的老爸
  • 13(守护进程)

    守护进程是一种纯粹的后台进程,与运行前环境完全隔离,包括未关闭的文件描述符、控制终端、会话、进程组、工作目录以及文件创建掩码等 很多守护进程是父进程 for...

    提莫队长
  • Condition控制线程通信:java三个线程循环打印ABC

    private Lock lock = new ReentrantLock(); private Condition c1 = lock.newConditi...

    用户1215919
  • LinkedBlockingQueue和ArrayBlockingQueue对比

    对比一下LinkedBlockingQueue和ArrayBlockingQueue的区别。

    IT云清

扫码关注云+社区

领取腾讯云代金券