您现在的位置是：网站首页> 编程资料编程资料

Flexbox 布局的最简单表单的实现浅谈最全面的水平垂直居中方案与flexbox布局利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css使用flexbox布局容器内多元素水平居中

2023-10-19 209人已围观

简介弹性布局（Flexbox）逐渐流行，越来越多人使用，本文章主要介绍了Flexbox 布局的最简单表单的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简单的表单，就可以解释 Flexbox，而且内容还很实用。

下面，你只需要10分钟，就可以学会简单的表单布局。

一、

上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为0，因为没有任何内容。

二、表单控件

现在，加入两个最常用的表单控件。

上面代码中，表单包含一个输入框（）和一个按钮（

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

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

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

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

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

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

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

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

上面代码中，

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

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