

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

<https://www.f2ff.jp/event/iotc-2020-02>にある以下のようなデザインをしたいです。  
動きはなくてよくて、配置のみになります。  
これを上下２列で５ボックスずつで配置したいです。  
どのようにすればいいでしょうか？今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。

[![画像の説明をここに入力](https://i.stack.imgur.com/X6ejE.png)](https://i.stack.imgur.com/X6ejE.png)

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

[![画像の説明をここに入力](https://i.stack.imgur.com/hbSiu.png)](https://i.stack.imgur.com/hbSiu.png)

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

* * *

▼html

[code]

    <section class="testimonials carousel-single section-padding bg-img bg-fixed" data-overlay-dark="7" data-background="img/bg4.jpg"> 
                <div class="container">
                    <div class="row">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>                
                    <div class="row">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
                    
    
                </div>
            </section>
    
[/code]

▼CSS

[code]

    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      outline: none;
      list-style: none;
      word-wrap: break-word;
    }
    
    body {
      color: #000;
      line-height: 1.3;
      font-weight: 400;
      font-size: 14px;
      font-family: 'Rubik', sans-serif;
      overflow-x: hidden !important;
    }
    
    p {
      font-size: 15px;
      font-weight: 300;
      color: #7f7f7f;
      line-height: 1.6;
      margin: 0;
    }
    
    img {
      width: 100%;
      height: auto;
    }
    
    span, a, a:hover {
      display: inline-block;
      text-decoration: none;
      color: inherit;
    }
    
    .section-padding {
      padding: 120px 0;
    }
    
    .section-head {
      margin-bottom: 80px;
    }
    .section-head h6 {
      color: #333;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 2px;
      display: inline-block;
      padding: 0 15px;
      position: relative;
    }
    .section-head h6:before, .section-head h6:after {
      content: '';
      width: 40px;
      height: 1px;
      background-color: #2AAFC0;
      position: absolute;
      bottom: 3px;
    }
    .section-head h6:before {
      left: -40px;
    }
    .section-head h6:after {
      right: -40px;
    }
    .section-head h4 {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .bg-gray {
      background: #f7f7f7;
    }
    
    .o-hidden {
      overflow: hidden;
    }
    
    .position-re {
      position: relative;
    }
    
    .full-width {
      width: 100% !important;
    }
    
    .lg-line-height {
      line-height: 1.5;
    }
    
    .bg-img {
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .bg-fixed {
      background-attachment: fixed;
    }
    
    .valign {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    
    .v-middle {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      -webkit-transform: translate(0%, -50%);
      transform: translate(0%, -50%);
    }
    
    .owl-theme .owl-nav.disabled + .owl-dots {
      margin-top: 15px;
      line-height: .7;
    }
    
    .owl-theme .owl-dots .owl-dot span {
      width: 8px;
      height: 8px;
      margin: 0 7px;
      border-radius: 50%;
      background: #ddd;
    }
    
    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
      background: #2AAFC0;
    }
    
    
    
    .testimonials .row {
      display: flex;
      margin-left: -20px;
    }
    
    .testimonials .testimonials-img {
      margin: 10px auto;
      width: 100%;
      margin-left: 20px;
      height: 60px;
    }
    
[/code]

* * *

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

justify-content:space-around も試しましたがうまくいきませんでした。  
アドバイスいただけると助かります。

[![画像の説明をここに入力](https://i.stack.imgur.com/W1vZV.png)](https://i.stack.imgur.com/W1vZV.png)

▼HTML

[code]

    <div class="flex-container">
                    <div class="flex-item">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
                    <div class="flex-item">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
                    <div class="flex-item">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
            　　　　　<div class="flex-item">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
                    <div class="flex-item">
                        <img class="testimonials-img" src="img/blog/1.jpg" alt="">
                    </div>
                </div>
    
[/code]

▼CSS

[code]

    /* 親要素(コンテナ) */
    .flex-container {
        background-color: #dfdfdf;
        display: flex;
    }
    /* 子要素(アイテム) */
    .flex-item {
        margin: 10px auto;
        padding: 5px 10px;
        box-sizing: border-box;
        background-color: #343434;
        color: #fff;
    }
    
[/code]


CC BY-SA 4.0
2021-01-01T06:24:34.700
73004
2021-01-01T09:58:52.340
2021-01-01T07:59:20.553
40231
40231
question
html css bootstrap
CSSにおいて画像を上下に５つずつ配置したい


以下のコードでできました。  
▼HTML

[code]

    <div class="flex-container">
                    <ul>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    </ul>
                    <ul>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                        <li><img class="testimonials-img" src="img/blog/1.jpg" alt=""></li>
                    </ul>
    
                </div>
    
[/code]

▼CSS

[code]

        ul {
      display: flex;
      justify-content: space-evenly;
    }
    
    li {
      margin: 10px;
      position: relative;
      width: 20%;
    }
    
[/code]


CC BY-SA 4.0
2021-01-01T09:58:52.340
73010
2021-01-01T09:58:52.340
40231
73004
answer