![]() ![]() col, on the other hand, tries to fill all space available while also shrinking if needed.ĬSS helper class col-grow makes the cell fill at least the space it needs to be rendered, with the possibility to grow when more space is available.ĬSS helper class col-shrink makes the cell fill at most the space it needs to be rendered, with the possibility to shrink when not enough space is available.Īnother example with a visual representation below it: 1 1 1 1 2 1 In the example above, col-8 fills two thirds (2/3) of the row width, because 8/12 = 2/3 = 66%, while col-2 occupies one sixth (2/12 = 1/6 ~ 16.67%).ĬSS helper class col-auto makes the cell fill only the space it needs to be rendered. Here are some examples of the available CSS helper classes: two thirds one sixth auto size based on content and available space fills remaining available space Quasar uses a 12 point column system for distributing the size of row children. The next classes align a flex container’s lines within when there is extra space in the cross-axis, similar to how horizontal-* aligns individual items within the main-axis. There is also the convenience flex-center CSS class which is equivalent to items-center + justify-center. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |