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

Question

我希望将某一列设置为固定的像素大小，然后让其他列占据剩余的空间。

以下是代码示例，在此示例中，我希望第一列宽度为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%。

是否有一种使用固定像素的方法？

提前致谢。

- peterc

Answer 1

您可以使用flex-basis来实现您想要的效果。在您的Sass中...

ion-row {

    ion-col {

        &:first-of-type {

            flex: 0 0 10px;

        }
    }
}

Flex的简写属性允许您将其设置为 flex-grow, flex-shrink, 和 flex-basis 的值是您希望元素占用的空间。

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

- Alsh

---

将 flex 添加到 col 中完美地工作了（我直接将其添加到应用于 ion-col 的类中）。谢谢！ - peterc

Answer 2

您可以在Ionic文档中提到的方式指定列的最小宽度。在我的情况下，第一列将保持固定，其余列将调整大小。

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

.accordion{
   min-width: 224px;
}

- Samiullah Khan