What are some examples of using Flexbox in Vue.js?

What are some examples of using Flexbox in Vue.js?

Flexbox is a powerful layout tool in CSS, and you can easily integrate it with Vue.js. Here are a few examples: 1. Centering items: You can use justify-content and align-items to center elements in a Vue component. 2. Responsive grids: Create a responsive grid layout by using Flexbox properties in your Vue templates. 3. Navigation bars: Build a horizontal navigation bar that adjusts based on the screen size.

Can you show me a code snippet for centering items?

Sure! Here's a simple example:

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

<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.item {
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
}
</style>

What about creating a responsive grid?

Here's how you can create a responsive grid using Flexbox in Vue.js:

<template>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
</template>

<style>
.grid-container {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  flex: 1 1 200px;
  margin: 10px;
  background-color: lightcoral;
  text-align: center;
}
</style>