CSSにおいて画像を上下に５つずつ配置したい

今HTML,CSS,Bootstrapでページをデザインしています。

https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。

動きはなくてよくて、配置のみになります。
これを上下２列で５ボックスずつでは位置したいです。
どのようにすればいいでしょうか？今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。

現状は以下のようになっています。

html
1    <section class="testimonials carousel-single section-padding bg-img bg-fixed" data-overlay-dark="7" data-background="img/bg4.jpg"> 
2                <div class="container">
3                    <div class="row">
4                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
5                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
6                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
7                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
8                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
9                    </div>                
10                    <div class="row">
11                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
12                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
13                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
14                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
15                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
16                    </div>
17                    
18    
19                </div>
20            </section>

CSS
1  * {
2     margin: 0;
3     padding: 0;
4     -webkit-box-sizing: border-box;
5             box-sizing: border-box;
6     outline: none;
7     list-style: none;
8     word-wrap: break-word;
9   }
10   
11   body {
12     color: #000;
13     line-height: 1.3;
14     font-weight: 400;
15     font-size: 14px;
16     font-family: 'Rubik', sans-serif;
17     overflow-x: hidden !important;
18   }
19   
20   p {
21     font-size: 15px;
22     font-weight: 300;
23     color: #7f7f7f;
24     line-height: 1.6;
25     margin: 0;
26   }
27   
28   img {
29     width: 100%;
30     height: auto;
31   }
32   
33   span, a, a:hover {
34     display: inline-block;
35     text-decoration: none;
36     color: inherit;
37   }
38   
39   .section-padding {
40     padding: 120px 0;
41   }
42   
43   .section-head {
44     margin-bottom: 80px;
45   }
46   .section-head h6 {
47     color: #333;
48     font-size: 11px;
49     font-weight: 500;
50     text-transform: uppercase;
51     letter-spacing: 2px;
52     display: inline-block;
53     padding: 0 15px;
54     position: relative;
55   }
56   .section-head h6:before, .section-head h6:after {
57     content: '';
58     width: 40px;
59     height: 1px;
60     background-color: #2AAFC0;
61     position: absolute;
62     bottom: 3px;
63   }
64   .section-head h6:before {
65     left: -40px;
66   }
67   .section-head h6:after {
68     right: -40px;
69   }
70   .section-head h4 {
71     font-size: 30px;
72     font-weight: 600;
73     margin-bottom: 15px;
74   }
75   
76   .bg-gray {
77     background: #f7f7f7;
78   }
79   
80   .o-hidden {
81     overflow: hidden;
82   }
83   
84   .position-re {
85     position: relative;
86   }
87   
88   .full-width {
89     width: 100% !important;
90   }
91   
92   .lg-line-height {
93     line-height: 1.5;
94   }
95   
96   .bg-img {
97     background-size: cover;
98     background-repeat: no-repeat;
99   }
100   
101   .bg-fixed {
102     background-attachment: fixed;
103   }
104   
105   .valign {
106     display: -webkit-box;
107     display: -ms-flexbox;
108     display: flex;
109     -webkit-box-align: center;
110     -ms-flex-align: center;
111     align-items: center;
112   }
113   
114   .v-middle {
115     position: absolute;
116     width: 100%;
117     top: 50%;
118     left: 0;
119     -webkit-transform: translate(0%, -50%);
120     transform: translate(0%, -50%);
121   }
122   
123   .owl-theme .owl-nav.disabled + .owl-dots {
124     margin-top: 15px;
125     line-height: .7;
126   }
127   
128   .owl-theme .owl-dots .owl-dot span {
129     width: 8px;
130     height: 8px;
131     margin: 0 7px;
132     border-radius: 50%;
133     background: #ddd;
134   }
135   
136   .owl-theme .owl-dots .owl-dot.active span,
137   .owl-theme .owl-dots .owl-dot:hover span {
138     background: #2AAFC0;
139   }
140   
141   
142   
143   .testimonials .row {
144     display: flex;
145     margin-left: -20px;
146   }
147   
148   .testimonials .testimonials-img {
149     margin: 10px auto;
150     width: 100%;
151     margin-left: 20px;
152     height: 60px;
153   }

Bootstrapを使っての５列配置やflexも今勉強しているのですが、なかなか思い通りになりません。
サポート頂けると幸いです。

【追記】
現状以下のようにできました。
ただ均等に配置できておりません。
またこれを２列にする方法も模索中です。

justify-content:space-around も試しましたがうまくいきませんでした。

アドバイスいただけると助かります。

HTML
1<div class="flex-container">
2                <div class="flex-item">
3                    <img class="testimonials-img" src="img/blog/1.jpg" alt="">
4                </div>
5                <div class="flex-item">
6                    <img class="testimonials-img" src="img/blog/1.jpg" alt="">
7                </div>
8                <div class="flex-item">
9                    <img class="testimonials-img" src="img/blog/1.jpg" alt="">
10                </div>
11        　　　　　<div class="flex-item">
12                    <img class="testimonials-img" src="img/blog/1.jpg" alt="">
13                </div>
14                <div class="flex-item">
15                    <img class="testimonials-img" src="img/blog/1.jpg" alt="">
16                </div>
17            </div>

CSS
1/* 親要素(コンテナ) */
2.flex-container {
3    background-color: #dfdfdf;
4    display: flex;
5}
6/* 子要素(アイテム) */
7.flex-item {
8    margin: 10px auto;
9    padding: 5px 10px;
10    box-sizing: border-box;
11    background-color: #343434;
12    color: #fff;
13}

行動規範の内容に同意します

回答1件

自己解決

以下でできました。

HTML
1以下のコードでできました。
2▼HTML
3
4    <div class="flex-container">
5                    <ul>
6                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
7                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
8                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
9                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
10                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
11                    </ul>
12                    <ul>
13                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
14                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
15                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
16                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
17                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
18                    </ul>
19
20                </div>
21
22
23
24
25

   ```CSS

ul {
display: flex;
justify-content: space-evenly;
}

li {
  margin: 10px;
  position: relative;
  width: 20%;
}


![イメージ説明](e4eb152ceca8c75dce108625a413fd25.png)

投稿2021/01/01 10:01

solMackartony

総合スコア18

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

CSSにおいて画像を上下に５つずつ配置したい

関連した質問