是否可以将Ionic 2 ion-col设置为设定的像素大小而不是百分比？

Question

我只想将列设置为设置的px大小,然后让另一列占用剩余的空间.

我有以下我希望第一个col是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%.

有没有办法使用固定的px？

提前致谢

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 doc中所述。就我而言，第一列将保持固定，周围的列将调整大小。

<ion-grid>
    <ion-col class="accordion" col-2></ion-col>
    <ion-col></ion-col>
</ion-grid>

.accordion{
   min-width: 224px;
}