ul li 横並び 複数行

質問

現在、目次リストを以下のように設定しています

【html】
<div class="open-menu-inside">
<ol class="contents2">
<li><a href="#1"><strong>【ア】</strong></a></li>
<li><a href="#2"><strong>【イ】</strong></a></li>
<li><a href="#3"><strong>【ウ】</strong></a></li>
<li><a href="#4"><strong>【エ】</strong></a></li>
<li><a href="#5"><strong>【オ】</strong></a></li>
</ol>
</div>

【css】
ol.contents,
ol.contents ol{
counter-reset: list;
list-style: none;
padding: 0;
max-width: 100%;
font: 14px/1.6 'arial narrow', sans-serif;
}
ol.contents ol{
margin: 0 0 0 35px;
max-width: 100%;
}

.contents a{
position: relative;
display: block;
text-decoration: none;
padding: 3px 3px 3px 8px;
margin: 8px 0 8px 30px;
background: #f0ffff;/* 背景色 */
color: #000000;
font-weight: bold;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.contents a:hover{
background: #ccffff;/* マウスを乗せた時の背景色 */
}

.contents a:before{
content: counter(list);
counter-increment: list;
position: absolute;
left: -35px;
top: 50%;
height: 28px;
width: 28px;
margin-top: -1em;
background: #ff8c04;;
line-height: 28px;
text-align: center;
font-weight: bold;
color: #fff;
}

.contents a:after{
content: '';
position: absolute;
left: -28px;
top: 50%;
margin-top: -6px;
border: 6px solid transparent;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}

.contents a:hover:after{
left: -6px;
border-left-color: #ff8c04;;
}

これを一部のページでできれば5段で複数行表示したいのですが
ネットで検索して
flex-wrap: wrap;
を入れれば良いことはわかったのですが
どのように設定すればいいのかわかりません

また、前述のcssはそのまま使いたいので
その場合はol.contents,の部分をすべて
ol.contents2,
のように書き換えれば良いのでしょうか

htmi css
超初心者です
わかる方がおられたらお教えいただけないでしょうか
よろしくお願いします

回答No.1

i4004i

「contents2」が実際のCSSに存在しないので、まずはそこですよね。
そのあとに気づくことがあると思いますよ。