是否可以將Ionic 2 ion-col設置爲設置的像素大小而不是百分比？

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％。

有沒有辦法使用固定px？

在此先感謝

Answer 1

您可以使用基於flex的功能來實現您要查找的內容。在您的Sass中...

ion-row { 

    ion-col { 

     &:first-of-type { 

      flex: 0 0 10px; 

     } 
    } 
} 

Flex的速記屬性允許您將其設置爲並且您希望該元素佔用。

在這裏看到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

請看看

https://ionicframework.com/docs/v2/components/#grid

當然你也可以通過使用CSS來設置列寬，如@看到Alzor的答案。

Answer 3

如ionic doc中所述，您可以指定列的最小寬度。在我的情況下，第一列將保持固定並且周圍的列將調整大小。

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

.accordion{ 
    min-width: 224px; 
}