是否可以将 Ionic 2 离子列设置为设置的像素大小而不是百分比

Question

我只想将一列设置为设置的px大小，然后让另一列占用其余的空间。

我有以下内容，我希望第一个列说 10px

    <ion-grid>
        <ion-row>
               <ion-col width-X='10px' style='width:10px;background-color:red'></ion-col>
                <ion-col>
                    <div><b>item 1</b></div>
                    <div>item 2</div>
                    <div>item 3</div>
             </ion-col>
         </ion-row>
    </ion-grid>

但第一列始终为 50%。

有没有办法使用固定像素？

提前致谢

Answer 1

您可以使用 flex-basis 来实现您想要的东西。在你的屁股...

ion-row {
    ion-col {
        &:first-of-type {
            flex: 0 0 10px;
        }
    }
}

Flex的速记属性允许您将其设置为您希望元素占用的元素。

看这里： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您可以指定列的最小宽度，如 ionic 文档中所述。在我的情况下，第一列将保持固定，周围的列将调整大小。

<ion-grid>
    <ion-col class="accordion" col-2></ion-col>
    <ion-col></ion-col>
</ion-grid>
.accordion{
   min-width: 224px;
}