Creating space between flex column components

Question

Creating space between flex column components

I am attempting to create some space between the buttons (Reset Filter/Apply Filter/Save & Apply Filter) in my UI. I have used flexbox to align the buttons, but I am struggling to add margins or gaps between them. Any suggestions on how to achieve this?

Here is the code snippet:

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

https://i.sstatic.net/xQRJY.png

javascript css vue.js flexbox

Answer 1

Answer №1

Are you utilizing Vuetify? If so, consider applying a margin class to each button:

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

Take a look at Vuetify's spacing guidelines.

On a separate note: refrain from using inline styles. It's recommended to use classes instead. For example:

class="mb-2 ml-7"

This will result in an 8px bottom margin and a 28px left margin.

Additionally, when assigning a function name to @click, do not execute it, simply pass the name (refer to the example above).

Answer 2

Are you utilizing Vuetify? If so, consider applying a margin class to each button:

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

Take a look at Vuetify's spacing guidelines.

On a separate note: refrain from using inline styles. It's recommended to use classes instead. For example:

class="mb-2 ml-7"

This will result in an 8px bottom margin and a 28px left margin.

Additionally, when assigning a function name to @click, do not execute it, simply pass the name (refer to the example above).

Answer 3

Answer №2

To utilize justify-content: space-around, a specific height must be set as shown in the following 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>

Alternatively, you can make use of the latest 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>

Another option is to simply define 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>

Answer 4

To utilize justify-content: space-around, a specific height must be set as shown in the following 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>

Alternatively, you can make use of the latest 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>

Another option is to simply define 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>

Answer 5

Answer №3

One simple way to create space between flex items without individually styling each child element is by using this universal CSS solution:

.d-flex{
  gap: 10px;
  gap: 10px 20px; /* specifies row-gap and column gap */
  row-gap: 10px; /* applies only to rows */
  column-gap: 20px; /* applies only to columns */
}

For more information, you can visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Answer 6

One simple way to create space between flex items without individually styling each child element is by using this universal CSS solution:

.d-flex{
  gap: 10px;
  gap: 10px 20px; /* specifies row-gap and column gap */
  row-gap: 10px; /* applies only to rows */
  column-gap: 20px; /* applies only to columns */
}

For more information, you can visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

Creating space between flex column components

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting recursive function errors in a Javascript menu

How can we accurately identify the server that initiated an AJAX call in a secure manner?

Developing an Interactive Quiz using jQuery

iOS button on mobile Safari in the down state

Having trouble extracting the selected date from a datetimepicker to pass it via AJAX

Unable to host Express app on Firebase functions emulator due to a port conflict with error code EADDRINUSE: address already in use :::3000

Regular expressions for identifying a pattern that is not enclosed within double quotation marks

Find the sum of object prototype differences in JavaScript

Managing numerous HTTP requests and providing the outcome through Angular and Rxjs

Efficient two-way communication with Sanic websockets without endlessly waiting

Nextjs: issue with updating state within an interval is not functioning

Upon clicking a button on page 1, the data is transmitted to page 2 before redirecting the user to page 3

Conic-Gradient causing an intriguing visual anomaly

Issue: Unidentified supplier following JavaScript compression

Utilize mapGetter and mapMutations in Vuex with TypeScript without the need for class-style components syntax

Combine two arrays into a single array object

What are some ways I can personalize my react-table components?

CSS - The 'object-fit: cover' attribute isn't functioning properly within the HTML email content

AngularJS refrains from computing expressions

Using Three.js WebGL to create a custom circle with unique fill and border colors generated from a shader