用flex布局搭建的纯div下拉列表，请问下大家觉得有没有什么地方不妥啊。

首先，我先表明下，我并不是发什么教程，我一直是一个人在自学（学了一个多月了，新人如有不妥之处，请谅解，欢迎指教），周围也没有什么人和我交流，没事就看看别人的代码，我就觉得别人代码好像很多的样子，下拉列表全部都是用表格的形式，我就觉表格好像和div差不多啊，而且你还要去把表格的一些默认形式去除掉，那代码不是很多吗?直接用div排列然后居中多好啊。

.from-and-put{
    border-radius:5px 5px 0 0;
	position:relative;
	cursor:pointer;
	height:50px;
	width:1200px;	
	z-index:99999;	
	display:flex;
	align-items:center;
	background:#ffffff;
}
.from{	
	height:30px;
	width:100px;	
	display:flex;
	flex-direction:column;
	overflow:visible;
	margin:5px;
}
.from-tilte{
	flex: none;
	width:100px;
	height:30px;	
	border:1px solid #00ff80;
	border-radius:5px;
}
.from-list{
    flex: none;
	display:flex;
	flex-direction:column;
	background:#80ffff;
	height:0px;
	width:100px;
	transition:height 0.3s ease;
	overflow:hidden;
}
.from:hover>.from-list{
	height:150px;
	border:1px solid #400040;
	border-top:none;	
}
.list-name{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:30px;
}
.from-list>.list-name:hover{
	background:#ff8080;
}

<div class="from-and-put">
                                 <div class="from">
                                        <div class="from-tilte"><div  class="list-name">1</div></div>
                                        
                                         <div class="from-list">
                                                     <div  class="list-name">1</div>
                                                     <div  class="list-name">2</div>
                                                     <div  class="list-name">3</div>
                                                     <div  class="list-name">4</div>
                                                     <div  class="list-name">5</div>                                      
                                         </div>                                 
                                 </div>                                                                
                          </div>