我想在一个布局中创建这样的东西，其中图标与html对齐，我如何才能做到这一点?
我想创建的布局
我尝试了以下没有flexbox，但当宽度变窄它搞砸了。我想我应该试试弹性床垫。，希望能奏效。
好的版本版本混乱
.pageColumnMid{
margin-right:20px;
float : left;
clear : none;
height : auto;
width : auto;
}
.pageColumnLeft{
text-align:left;
float : left;
clear : none;
height : auto;
width : auto;
}
.pageColumnRight{
margin-left:20px;
float : left;
clear : none;
height : auto;
width : auto;
}
.lineheight50{
line-height: 40px!important;
}<body>
<div><div>
<div class="pageColumnMid"><span class="fas fa-user lineheight50" ></span> <br> <span class="fas fa-user lineheight50" ></span> <br> <span class="fas fa-user lineheight50" ></span> <br>
</div>
<div class="pageColumnLeft lineheight50" >View, manage and publish your personal data <br> View, manage and store your Contacts <br> View your technicaldata* <br>
</div>
<div class="pageColumnRight"></span><span class="fas fa-info lineheight50" ></span> <br> <span class="fas fa-info lineheight50" ></span> <br> <span class="fas fa-info lineheight50" ></span> <br>
</div>
</div>
</body>要实现您的设计，您可以这样做，如下所示:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.d-flex {
display: flex;
flex-wrap: wrap;
padding: 1rem;
flex-direction: column;
width: 100%;/*can edit as per requirement*/
}
.d-flex .col .child {
display: flex;
flex-wrap: wrap;
}
.d-flex .col {
display: flex;
flex-wrap: wrap;
padding: 1rem 0;
justify-content: space-between;
}
.d-flex p {
padding: 0 1rem;
}<!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="d-flex">
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View, manage and publish your personal data</p>
</div>
<span class="fas fa-info"></span>
</div>
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View, manage and store your Contacts</p>
</div>
<span class="fas fa-info"></span>
</div>
<div class="col">
<div class="child">
<span class="fas fa-user"></span>
<p>View your technicaldata*</p>
</div>
<span class="fas fa-info"></span>
</div>
</div>你应该学习Flex在CSS中的应用通过使用这些属性，你将得到你想要的…
display: flex; //Flexible Box Layout
flex-wrap: wrap; // box automatically go to next line
flex-direction: column; // boxes are arranged int column order.
来玩这些属性和其他也让你更清楚flex。由于