Как сделать колонки с 9тью элементами FlexBox?

Question

[Александр Волков]

Есть контейнер, в нем 9 блоков с иконками и текстом, нужно что бы было 3 колонки по 3 элемента в каждой колонке, все это получилось сделать НО
когда задаю отступы для текста и иконок, вместо 3 колонок получается 4 по 2 элемента в каждой, что делать и в чем ошибка?

<div class="section-5">
			<div class="idea">
				<div class="text-block-5">
					<h1>Идейные<br> соображения</h1>
					<p>Решения, которые принимала наша команда, основаны на потребностях и желаниях конечного пользователя. Благодаря им мы создали уникальную систему позволяющею эффективно управлять вашим бизнесом.</p>
				</div>
				<div class="ideing prototype">
					<img src="img/block-1.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing cpu">
					<img src="img/block-2.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing command">
					<img src="img/block-3.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing design">
					<img src="img/block-4.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing shield">
					<img src="img/block-5.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing conversation">
					<img src="img/block-6.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing pallete">
					<img src="img/block-7.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing code">
					<img src="img/block-8.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и UI</p>
				</div>
				<div class="ideing traning">
					<img src="img/block-9.png" alt="">
					<h4>Глубокая проработка</h4>
					<p>Мы тщательно продумали UX и 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

Как должно быть по макету:


Как получилось у меня:

Что получается когда задаю отступы:

Comments

[Rustam Bainazarov]

Вы уже задаёте один и тот же вопрос как минимум второй раз, а то и третий.

Ошибка у вас одна и та же — незнание правил адаптивности, резинового дизайна и flexbox. Вы задаёте абсолютно ненужные жёсткие габариты.

Вот зачем это всё?

height: 1000px
...
width: 280px;
...
width: 800px;
height: 400px;

И ещё изучите box-sizing: border-box. И посмотрите пример, что я кидал вам два вопроса назад в комментариях, на который вы даже не ответили: Как задать расстояние между элементами css?

[Александр Волков]

Рустам Байназаров, C тем вопросом я уже разобрался, поэтому и не ответил.
height: 1000px затем что по макету высота секции 1000 пикселей
width: 280px затем что ширина текстового блока по макету является 280 пикселей
width: 800px
height: 400px затем что только так вместо одной колонки я получаю нужных мне 3.

[Алекс Глебов]

https://codepen.io/SkiperX/pen/YjgwLV?editors=1100
так же, только колонки другого размера

[Алекс Глебов]

Александр Волков, забудьте про height
высота блоков равна высоте контента + padding
в верстке всегда

про width тоже
колонки это скелет верстки
а элементы внутри растягиваются под размеры колонки
потом в адаптиве размер колонок просто меняется, постепенное перестроение их друг под друга

[RAX7]

https://jsfiddle.net/qgosnmet/

[Rustam Bainazarov]

Александр Волков, ну, судя по всему, проблему вы совсем не решили, раз делаете то же самое в третий раз.

[Александр Волков]

RAX7, Все равно когда задаю отступы все идет по одному месту

Answer 1

[Владимир]

use flex-basis
https://developer.mozilla.org/uk/docs/Web/CSS/flex...
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

[kn1ght_t]

https://jsfiddle.net/na9zd2pe/