CODEWITHSUNDEEP
javascriptcssvue.jsflexbox
sromit
sromit

Reputation: 1112

Giving margins/gaps in between column Flex components

I am trying to give some margins between the buttons (Reset Filter/Apply Filter/Save & Apply Filter)in UI, I have used flex to align the buttons, but I am not able to give some margins/gaps between the buttons. Any idea how to do it

Code :

<div class="d-flex flex-column justify-space-around">
    <v-btn
        text
        style="margin-left: 30px"
        color="primary"
        @click="resetFilter()">
        Reset Filter
    </v-btn>
    <v-btn
        v-if="!updatingSavedFilter"
        color="primary"
        @click="
        applyFilter()
        filterDropdownOpen = false">
        Apply Filter
    </v-btn>
    <v-btn
        color="primary"
        @click="
        validateAndSaveFilter()    
        filterDropdownOpen = "false">
        Save &amp; Apply Filter
    </v-btn>
</div>

enter image description here

Upvotes: 1

Views: 4109

Answers (3)

Riyaz
Riyaz

Reputation: 19

There is a universal css solution to set gap between flex items using the following CSS, instead of adding styles/classes to each child element:

.d-flex{
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px; /* sets only for rows */
  column-gap: 20px; /* sets only for columns */
}

Reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Upvotes: 0

Igal
Igal

Reputation: 6083

It appears you're using Vuetify, am I right? In that case, you could add a margin class to each button:

<v-btn
   text
   style="margin-left: 30px"
   color="primary"
   class="mb-2"
   @click="resetFilter"
>
   Reset Filter
</v-btn>

See Vuetify's spacing documentation.

On another subject: try to avoid inline style. Better add a class. In this case you can have something like

class="mb-2 ml-7"

That will give you 8px margin on the bottom and 28px margin on the left.

Also, when passing function name to @click, don't execute it, only pass the name (see my example above).

Upvotes: 1

doğukan
doğukan

Reputation: 27381

You have to set a height to be able to use justify-content: space-around. Like in this example:

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 300px;
}

.box button {
  height: 50px;
  width: 200px;
}
<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Or you can use the new gap property.

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
}

.box button {
  height: 50px;
  width: 200px;
}
<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Or just set a margin-top

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.box button {
  height: 50px;
  width: 200px;
}

.box button:not(:first-child) {
  margin-top: 20px;
}
<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Upvotes: 1

Related Questions