问如何使用display:flex显示带有图像和文本的列表？

EN

$( document ).on( "click", "ul#tabs li", function() {
			
			var tab_id = $(this).attr('data-tab');
	
			$('ul#tabs li').removeClass('current');
			$('.tab-content').removeClass('current');
	
			$(this).addClass('current');
			$("#"+tab_id).addClass('current');
			
		})

#categories-container {
    width:100%;
    height: 80px;
    overflow: hidden;
    font-size: 0.8rem;
	
	display: flex;
	top: 0px;
	
	position: sticky;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;

	z-index: 5000;
	
	background-color: #FFFFFF;
	border-bottom: 1px solid #f4f4f4;
	border-top: 1px solid #f4f4f4;
	
}
#tabs {
    height:70px;
    padding:0px;
    white-space:nowrap;
    overflow-x: scroll;
    overflow-y: hide;
	-webkit-overflow-scrolling:touch;
	padding: 0px;
	margin: 0px 20px;
	display: inline-flex;
}
.module:first-child {
	margin-right: 11px;
}
.module {
    display: flex;
    flex-direction: column;
    align-items: center;
    height:60px;
    line-height:54px;
    text-align:center;
    background:#FFFFFF;
    color:#666666;
	text-transform: uppercase;
}
.module.current {
   color:#424647;
   font-weight: 500;
}
.module + .module {
    /* margin-left:10px*/
    margin: 0px 11px;
}
.tab-content{
			display: none;
			background: #FFFFFF;
			padding: 0px;
			margin-top: 10px;
}
.tab-content.current{
			display: inherit;
}

.filter-img{
  display:block;
}
.filter-text{
  display:block;
  font-size:0.7rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories-container">

  <ul id="tabs">
  <li class="module" data-tab="tab-1"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-2"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-3"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module current" data-tab="tab-4"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-5"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  <li class="module" data-tab="tab-6"><img class="filter-img" src="https://via.placeholder.com/60x60"><span class="filter-text">Text</span></li>
  </ul>
</div>

<div id="categories-container-content">

  <div id="tab-1" class="tab-content">1</div>
  <div id="tab-2" class="tab-content">2</div>
  <div id="tab-3" class="tab-content">3</div>
  <div id="tab-4" class="tab-content current">4</div>
  <div id="tab-5" class="tab-content">5</div>
  <div id="tab-6" class="tab-content">6</div>

</div>