How to make speakers with 9тью elements FlexBox?

Have a container, it has 9 blocks with icons and text, that would have to have 3 columns by 3 elements in each column, all to make this happen BUT
when you want to set padding for text and icons instead of 3 columns turns 4 on 2 items in each, what to do and what is the error?
<div class="section-5">
 <div class="idea">
 <div class="text-block-5">
 <h1>Ideological<br> considerations</h1>
 <p>the Decisions, which took our team based on the needs and desires of the end user. Thanks to them, we have created a unique system to effectively manage your business.</p>
</div>
 <div class="ideing prototype">
 <img src="img/block-1.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing cpu">
 <img src="img/block-2.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing command">
 <img src="img/block-3.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing design">
 <img src="img/block-4.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing shield">
 <img src="img/block-5.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing conversation">
 <img src="img/block-6.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="pallete ideing">
 <img src="img/block-7.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing code">
 <img src="img/block-8.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
</div>
 <div class="ideing traning">
 <img src="img/block-9.png" alt="">
 <h4>reflection</h4>
 <p>We have carefully thought through UX and UI.</p>
 </div> 
 </div> 
 </div>


.section-5
 width: 1920px
 height: 1000px
 background: #f9fafc

.text-block-5
 padding-left: 370px

.text-block-5 h1
 font-size: 40px
 font-weight: normal

.text-block-5 p
 font-size: 18px
 color: #333333
 opacity: 0.7
 width: 280px
 padding-top: 22px

.idea 
 display: flex 
 flex-direction: column
 flex-wrap: wrap 

 padding-top: 180px
 width: 800px
 height: 400px


How should be the layout:
rWEDuiQK3EM.jpg

As I get: 5Ua5qd4OBxw.jpg

What happens when you set the padding: MkMj97YVVP4.jpg
March 20th 20 at 11:38
2 answers
March 20th 20 at 11:42

Find more questions by tags CSSHTMLFlexbox