Flex实战二（表单布局）

最新推荐文章于 2025-02-25 13:26:54 发布

king.sheng

最新推荐文章于 2025-02-25 13:26:54 发布

阅读量752

点赞数

分类专栏： Flex

本文链接：https://blog.youkuaiyun.com/shengxiaohua1/article/details/104880776

版权

Flex 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了使用Flex布局在网页表单设计中的优势，包括消除元素间间隙、统一元素高度、自适应宽度及高度，以及如何通过设置flex-grow属性实现元素间的比例分配。通过对比分析，展示了Flex布局在提升用户体验方面的显著效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>flex表单布局对比</title>
</head>

<body>
   <div>
     <p>没有flex布局按钮之间有间隙</p>
     <input type="email" name="email" />
	 <button type="submit">发送</button>
   </div>
   <hr>
   
   <style>
     .myflex{display: flex;}
   </style>
   <p>有flex布局,按钮之间没有间隙</p>
   <div class="myflex">
     <input type="email" name="email" />
	 <button type="submit">发送</button>
   </div>
   
   <style>
     .myflex2{display: flex;}
	 .myinput{flex-grow: 1;}
   </style>
   <p>有flex布局,并且制定缩放比例</p>
   <div class="myflex2">
     <input class="myinput" type="email" name="email" />
	 <button type="submit">发送</button>
   </div>
   
    <style>
     .myflex3{display: flex;}
	 .myinput{flex-grow: 1;}
   </style>
   <p>有flex布局,并且制定缩放比例1:1</p>
   <div class="myflex3">
     <input class="myinput" type="email" name="email" />
	 <button class="myinput" type="submit">发送</button>
   </div>
   
   <style>
     
   </style>
   <p>没有flex布局,元素高度不一样</p>
   <div>
     <input type="email" name="email" />
	 <button type="submit">
	   <img src="1.png" />
	 </button>
   </div>
   
   <style>
     .myflex4{display: flex;}
   </style>
   <p>有flex布局,元素高度一样,可以定义图标大小，左边的元素会自适应高度，并且紧贴一起</p>
   <div class="myflex4">
     <input type="email" name="email" />
	 <button type="submit">
	   <img src="1.png" />
	 </button>
   </div>
</body>
</html>