Flexbox - daniel-qa/Vue GitHub Wiki

Flexbox

容器（Flex Container）： 將需要使用 Flexbox 進行布局的元素設置為 Flex 容器。這可以通過將 display 屬性設置為 flex 或 inline-flex 來實現。

.flex-container {
  display: flex; /* 或 inline-flex */
}
  • 下是一個使用 Flexbox 的簡單示例：
<template>
  <div class="flex-container">
    <div class="item">項目 1</div>
    <div class="item">項目 2</div>
    <div class="item">項目 3</div>
  </div>
</template>

<style>
.flex-container {
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 設置容器高度 */
  background-color: #f0f0f0;
}

.item {
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
}
</style>

這個例子中，所有項目會在容器中水平和垂直居中顯示，並且它們的背景顏色為淡藍色。

⚠️ **GitHub.com Fallback** ⚠️