css - Flexbox 未对齐

Question

我想在中间创建 6 个盒子，并在里面显示一些功能。

我正在使用 display: inline-flex 但是因为我无法让它们正确对齐，所以最后一个框似乎不合适。 我不想使用 Bootstrap 或任何其他框架，而是使用纯 CSS 实现。

我希望在居中的 div 中间对齐 6 个框。这是我尝试过的，片段示例

.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>

Answer 1

这是另一个解决方案，但使用 CSS Grid，html 被清理了一下。

这里的关键部分是这一行 grid-template-columns: repeat(3, 1fr); 它告诉网格我们想要 3 列并且每一列都应该使用相同的空间 1fr(可用空间的一小部分)

.center {
  margin: auto;
  width: 80%;
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.flexi {
  border: 3px solid green;
}

	<div class="center">

		<div class="flexi">
			<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 class="flexi">
			<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 class="flexi">
			<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>

		<!--  Bottom row cards-->

		<div class="flexi">
			<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 class="flexi">
				<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 class="flexi">
				<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>