I would like to display a number of cards in a flexbox.
Unfortunately, the items do not wrap properly in some browser window sizes. Example:
My Code:
<v-row>
<v-col v-for="n in 7">
<v-card
max-width="344"
outlined
min-width="350"
height="120"
>
Card
</v-card>
</v-col>
</v-row>
I created a pen for this: https://codepen.io/Tenarius/pen/poywYYW
The problem is particularly with a resolution of 1920x1040.
How do I set the items so that they wrap exactly on top of each other despite min-width and max-width in every resolution?
You need to remove flex-grow: 1 from .col.
It's distributing free space between the items.
Being that the number of items in each row varies, the free space will vary, leading to an uneven distribution.
Related
I am working in a personal project in which I am using Vue+Vuetify. In one view I'm going to have an image logo and, bellow it, a Drag&Drop area. For this I started testing the grid system (Vuetify 2.X), which is giving me a bit of a headache.
For testing I used this code that is referenced in the Vuetify's documentation website about the Grid system:
<template>
<v-container class="grey lighten-5">
<v-row v-for="n in 2" :key="n" :class="n === 1 ? 'mb-6' : ''" no-gutters>
<v-col v-for="k in n + 1" :key="k">
<v-card class="pa-2" outlined tile> {{ k }} of {{ n + 1 }} </v-card>
</v-col>
</v-row>
</v-container>
</template>
The result of this code should look like this:
From the documentation and this example, I understand that the v-container acts as a package that holds the v-rows, which are the ones that have the v-cols that are the ones with the information to display. The v-container will arrange the v-rows vertically, while the v-rows will do it horizontally to the v-cols. In summary: the v-container is the foundation for a matrix-like structure, in which the combination of v-rows with v-cols are the tiles of the matrix.
With this all said, using the same code in my view I get this:
Here the v-container seems to be arrnaging the v-rows horizontally instead, and not even centered.
Is this normal? Did I miss an option or maybe the problem is comming from outside the view?
Thank you for your time.
I am trying to use the Vuetify Flex CSS Helpers to create cards with varying heights. The cards can wrap when there is no more space. However, I would like the wrapping to be more intelligent. Right now they wrap to the bottom of the previous "row", but is there a way to get them to wrap to content with the highest bottom to minimize the amount of space is allocated for the entire component? Here is some sample code:
<v-card class="d-flex flex-wrap" color="grey lighten-2" flat tile>
<v-card class="align-self-start" outlined tile>
...
</v-card>
<v-card class="align-self-start" outlined tile>
...
</v-card>
...
</v-card>
Here is a full CodePen example. In it you will see when the last card wraps, it goes to be under the first card. But there is a lot of vertical space between the first card and the last card now. I would like to remove that vertical space. Is this possible?
Thanks
As per the image above, I'm having trouble stacking or ordering my v-flex components the way that I need in my grid. Basically, I need my third v-flex (v-flex 3) to stack on the right side when the screen size changes to md.
I've been messing around with this for a few hours, and I am stuck. I hope this makes sense. Thanks.
This is how you can achieve your desired results:
<v-layout row wrap justify-center>
<v-flex md6><v-btn block dark>1</v-btn></v-flex>
<v-flex md6><v-btn block dark>2</v-btn></v-flex>
<v-flex xs12 md6 order-md2><v-btn block dark>3</v-btn></v-flex>
<v-flex xs10 md6 order-md1><v-btn block dark>4</v-btn></v-flex>
</v-layout>
You can learn more about it Here.
Here is a Codepen that does that.
By adding justify-center you make sure that when your v-flex does not get the entire row, it will still look nice(in this case, in the center). You can also control the ordering of grid items by using order-{screenBreakpoint}{order} so in this case I used order-md2 for 3rd v-flex and order-md1 for 4th v-flex.
The order in medium size screen:
The order in smaller size screen:
I want to arange unequal high elements in a floating environment with bootstrap 4 and flexbox.
Without using flexbox in BS4 the elements are aranged in equal height ( <div class="row">). Applying flexbox like <div class="row d-flex flex-wrap align-items-start"> I get the desired alignment but if the elements have an unequal height they - of course - don't float.
Is there a way to achieve this to look
like the "former" BS3 bahaviour ?
I want to implement a general "algorithm" so that I can add elements without specifying the positions explicitly.
No, there's no way to get flexbox items to float.
However, you can override the display:flexbox on the Bootstrap 4 row, by using d-block and use the float utils. This has already be explained in several other questions.
Bootstrap 4 - I don't want columns to have the same height
Rearranging responsive Bootstrap 4 grid layout
Bootstrap Responsive Columns Height
Empty vertical space between columns in Bootstrap 4
Note that d-block is a responsive class (d-sm-block, d-md-block, etc...) which allows you to override flexbox responsively on specific breakpoints.
BootStrap allows four types of classes for column/Grid System.
.xs // for mobiles
.sm // for tablest
.md // for laptops and normal desktops
.lg // for larger desktop
Suppose i want to create a webpage/website which should be more resposive (definitely it must be) for all type of media. from mobiles to larger desktop. Can i use classes in this formate.
Note: In this example i am going to create left side column.
<div class="left-col col-xs-12 , col-sm-12 col-md-3 col-lg-3">
In above Example , i used col-xs-12 so that when screen is smaller then its width should be 100% , similarly col-sm-12 . and i used col-md-3 so that if screen size is more than 700px(approx) , the column's width should be 25% and similarly with col-lg-3.
So again i repeat my Question that should i combined all four classes to make more responsive and dynamic webpages?
The following might be enough to achieve your goal
<div class="left-col col-sm-12 col-md-3">
It will use the full width when the device is a tablet or below. And it will use 1/4 of the width when its a laptop or larger desktop pc.