要素を均等配置し、その中にさらに均等配置する

htmlにて、ウェブページを作りたいと考えています。

ある要素を均等配置し、その要素の中の要素も均等配置したいと考えています。

html
1<!DOCTYPE html>
2<head>
3<link rel="stylesheet" type="text/css" href="test.css">
4<title>title</title>
5</head>
6	<body>
7		<div class="contents">
8			<div class="main">
9				<div class="sub"></div>
10				<div class="sub"></div>
11				<div class="sub"></div>
12			</div>
13			<div class="main">
14				<div class="sub"></div>
15				<div class="sub"></div>
16				<div class="sub"></div>
17			</div>
18			<div class="main">
19				<div class="sub"></div>
20				<div class="sub"></div>
21				<div class="sub"></div>
22			</div>
23		</div>
24	</body>
25</html>
26
27

css
1.contents {
2	display:flex;
3	flex-flow: column;
4	justify-content:space-between;	
5	height: 300px;	
6}
7
8.main {
9	width: 40px;
10	height: 5px;
11	content: '';
12	background: #EF6C00;
13}
14	
15.sub {
16	width: 20px;
17	height: 3px;
18	content: '';
19	background: #EF6C00;
20}

とすると、mainの線は縦に均等配置されますが、subの線は固まって表示されます。
このsubの線も、mainの線と線の間に均等配置したいのですが、やり方がよくわかりません。

cssの.mainを

css
1.main {
2    display:flex;
3	flex-flow: column;
4	justify-content:space-between;	
5	width: 40px;
6	height: 5px;
7	content: '';
8	background: #EF6C00;
9}