离子将内容均匀地分布在 <ion-select-option> 上答案

【问题标题】：Ionic spread content evenly over <ion-select-option>离子将内容均匀地分布在 <ion-select-option> 上
【发布时间】：2019-09-02 10:12:42
【问题描述】：

我正在创建一个离子选择，在该选择中，一个项目具有 3 个值（强度、弱点、盔甲，即）我希望这三个值均匀分布在离子选择选项上，但我似乎无法弄清楚如何。

我尝试了各种 css 和 html 选项，这是我最新的（失败的）实验。

            <ion-select class="simple-select" placeholder="Select One"
                interface="action-sheet">
                <ion-select-option *ngFor="let knight of knights" class="ion-text-wrap">
                <ion-item>
                    <ion-label  slot="start">{{knight.strength}}</ion-label>
                    <ion-label>{{knight.weakness}}</ion-label>
                    <ion-label  slot="end">PPknight.armor}}</ion-label>
                </ion-item>
                </ion-select-option>
            </ion-select>

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

您应该可以使用Flex 来执行此操作，可以使用 CSS 或使用 Angular's Flex Layout 指令。

（这些是粗略的例子，可能需要调整） CSS：

.container {
  display: flex; /* or inline-flex */
  flex-direction: row;
}

弹性布局：

<ion-item fxLayout="row">
  <ion-label fxFlex>{{knight.strength}}</ion-label>
  <ion-label fxFlex>{{knight.weakness}}</ion-label>
  <ion-label fxFlex>PPknight.armor}}</ion-label>
</ion-item>

【讨论】：