Я хочу создать 6 коробок посередине и отобразить некоторые элементы внутри.
Я использую display: inline-flex, но из-за того, что я не могу их правильно выровнять, последняя коробка кажется неуместной,Я не хочу использовать Bootstrap или какой-либо другой фреймворк, но сделаю это с помощью чистого CSS.
Я ожидаю, что выровнял 6 блоков по центру центрированного div.Это то, что я пробовал, пример фрагмента
.center {
margin: auto;
width: 80%;
padding: 80px;
}
.flexi {
display: inline-flex;
}
.jebote {
border: 3px solid green;
}
.jebote5 {
border: 3px solid green;
}
.jebote6 {
border: 3px solid green;
}
.h1 {
}
<div class="center">
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Custome Software Solutions</p>
<p style="font-size:14px;">
Every business is unique and there is no “one-size-fits-all” when it
comes to technology solutions that drive growth and stand you out in
competitive market.
</p>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px; ">Consulting and Strategy</p>
<p style="font-size:14px">
To develop efficient software and reduce the related costs, process
and technology consulting are essential and integral part of every
business strategy.
</p>
</div>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Design and Creative Work</p>
<p style="font-size: 14px;">
Design plays a key role in engaging visitors and converting them
into customers. We focus on creating memorable interactions through
our designs.
</p>
</div>
</div>
</div>
</div>
<!-- Bottom row cards-->
<div class="flexi">
<div class="inline">
<div class="jebote">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Mobile Applications</p>
<p style="font-size:14px;">
We like to think of the problem the app intends to solve, analyze
mobility context and create a mobile solution meeting that need and
satisfying user experience.
</p>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote5">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">Website Development</p>
<p style="font-size:14px">
Professional, responsive, engaging and value driven web sites are
true support to every business. They help engage the customers and
gain an edge over the competitors.
</p>
</div>
</div>
</div>
<div class="flexi">
<div class="inline">
<div class="jebote6">
<a href="#news"><img src="http://files.softicons.com/download/toolbar-icons/free-green-button-icons-by-aha-soft/png/40x40/theater%20symbol.png"/></a>
<p style="font-size: 20px;">E-Commerce Development</p>
<p style="font-size: 14px;">
Building intuitive, useful, secure and accessible e-Commerce
solutions that power the transactions and digital experience is
important to us..
</p>
</div>
</div>
</div>
</div>
</div>