首页 > 其他分享> > Flex实战二（表单布局）

Flex实战二（表单布局）

2020-03-15 16:40:20 作者：互联网

在这里插入图片描述

<!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>

标签：实战,Flex,flex,布局,myinput,表单,发送,缩放,display
来源： https://blog.csdn.net/shengxiaohua1/article/details/104880776