Flexbox - daniel-qa/Vue GitHub Wiki

自動縮放

flex: auto → 1 1 auto（可伸可縮，依內容初始）

「可以伸、可以縮，但一開始請尊重我原本的寬度或內容大小。」

按鍵靠右

用 Flexbox 排版（最推薦、最現代）; margin-left: auto

<div class="search-area">
    
	<Input class="search-input light-iview-input"  v-model="keyword" style="width:250px" />	
	<Button type="primary" @click="handleSelection" :disabled="disabled" style="margin-left: auto;">確認選擇</Button>

</div>

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

由於 .search-area 使用 display: flex 布局，margin-left: auto 會自動將按鈕推到容器的最右側

margin-left: auto 是 flex 排版中讓元素「自動推向右邊」的簡潔解法

如果元件要靠左，使用Flexbox預設即可

  • 觀念

margin 的作用是「推開自己與其他元素的距離」，當你設 margin-left: auto 時，瀏覽器會自動分配剩餘空間，讓該元素被推到最右邊。

padding 的作用是「增加內容與邊框之間的內距」，它只是數值，不能自動去「吃掉剩餘空間」，所以 auto 對它沒有意義。

容器（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** ⚠️