How can I use Flexbox in Vue.js?

How can I use Flexbox in Vue.js?

You can use Flexbox in Vue.js by applying CSS styles directly in your components. Just set the display property to 'flex'.

Can you give me an example of a Flexbox layout in a Vue component?

Sure! Here's a simple example:

<template>
  <div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
}
.item {
  background-color: lightblue;
  padding: 10px;
}
</style>

What if I want to center items vertically?

You can center items vertically by adding align-items: center; to your flex container's CSS. Here's how:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; // This makes the container full height
}

Are there any common pitfalls when using Flexbox in Vue?

Yes, a common pitfall is not setting the height of the flex container, which can lead to unexpected layouts. Always ensure your container has a defined height if you're centering items.