Ionic 4 ion-item布局问题：如何将内部内容改为两行展示？

嘿，我来帮你搞定这个布局问题～

首先，咱们得先搞清楚ion-item的默认布局逻辑：它本质上是一个flex容器，默认的flex-direction是row（横向排列），所以你直接放在它里面的子元素（比如你那两个ion-row）会被横向挤在同一行，看起来就像是“一列”，这就是你遇到的问题根源。你尝试修改display属性没用，是因为Ionic的内置CSS优先级更高，直接改display会被覆盖，咱们得从flex布局的方向入手调整，这才是正确的思路。

给你两种简单有效的解决方案：

方案1：用Ionic内置的flex类快速调整 #

直接给ion-item添加ion-flex-column类，把它的flex方向改成垂直排列，这样里面的元素就会自动分成两行：

<ion-item lines="none" class="ion-flex-column">
  <ion-row>
    <ion-icon [name]="item.icon"></ion-icon>
  </ion-row>
  <ion-row>
    <ion-label> {{p.title}} </ion-label>
  </ion-row>
</ion-item>

方案2：简化结构，自定义样式 #

其实你没必要嵌套两层ion-row，直接把ion-icon和ion-label作为ion-item的子元素，然后设置flex方向即可，这样代码更简洁：

<ion-item lines="none" style="flex-direction: column; align-items: flex-start;">
  <ion-icon [name]="item.icon"></ion-icon>
  <ion-label> {{p.title}} </ion-label>
</ion-item>

这里加align-items: flex-start是为了让内容左对齐，如果你想要居中，可以改成align-items: center，根据你的需求调整就行。

这样调整后，图标和标签就会垂直分成两行展示啦～

内容的提问来源于stack exchange，提问作者Keryanie