DDR爱好者之家

Flexbox 布局的最简单表单的实现
站长资源 2024/11/24 佚名
52 1538
DDR爱好者之家 Design By 杰米

弹性布局（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），也就是说，它们默认并排在一行上。

Flexbox 布局的最简单表单的实现 

上图是浏览器对这个表单的默认渲染（颜色除外），可以看到，这两个控件之间有3像素～4像素的间隔，这是浏览器的内置样式指定的。

三、指定 Flexbox 布局

接着，指定表单使用 Flexbox 布局。

form  {
  display: flex;
}

Flexbox 布局的最简单表单的实现

可以看到，两个控件之间的间隔消失了，因为弹性布局的项目（item）默认没有间隔。

四、flex-grow 属性

两个地方值得注意。

（1）两个控件元素的宽度没有发生变化，因为弹性布局默认不改变项目的宽度。

（2）弹性布局默认左对齐，所以两个控件会从行首开始排列。

如果我们希望，输入框占据当前行的所有剩余宽度，只需要指定输入框的 flex-grow 属性为 1 。

input  {
  flex-grow: 1;
}

Flexbox 布局的最简单表单的实现

上图中，按钮的宽度没变，但是输入框变宽了，等于当前行的宽度减去按钮的宽度。

flex-grow 属性默认等于 0 ，即使用本来的宽度，不拉伸。等于 1 时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。

五、align-items 属性

我们做一点改变，在按钮里面插入一张图片。

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg>  <!-- a smiley icon -->  </svg></button>
</form>

按钮插入图片后，它的高度变了，变得更高了。这时，就发生了一件很奇妙的事情。

Flexbox 布局的最简单表单的实现

上图中，按钮变高了，输入框也自动变得一样高了！

前面说过， 弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。 本例中，按钮变高了，导致表单元素也变高了，使得输入框的高度自动拉伸了。

align-items 属性可以改变这种行为。

input {
  flex-grow: 1;
  align-self: center;
}

Flexbox 布局的最简单表单的实现

align-items 属性可以取四个值。

  • flex-start：顶边对齐，高度不拉伸
  • flex-end：底边对齐，高度不拉伸
  • center：居中，高度不拉伸
  • stretch：默认值，高度自动拉伸

如果项目很多，一个个地设置align-self属性就很麻烦。这时，可以在容器元素（本例为表单）设置align-items属性，它的值被所有子项目的align-self属性继承。

form {
display: flex;
align-items: center;
}

上面代码中， <form>元素设置了align-items以后，就不用在控件上设置align-self，除非希望两者的值不一样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米