Flexbox - daniel-qa/Vue GitHub Wiki

在 Flexbox 中，justify-content 永遠是控制 「主軸」 方向的對齊方式。

當 flex-direction: row 時（預設值）：

主軸是水平方向。

justify-content: center; 就是 水平居中。

當 flex-direction: column 時：

主軸變成了垂直方向。

justify-content: center; 就變成了 垂直居中。

  • align-items 定義的是 「側軸」（Cross Axis） 的對齊方式。簡單來說，如果你的主軸是水平的，那它就是控制 「垂直」 方向的對齊。

**所以定義上，就是對齊(align)主軸。

  • gap
<div style="display: flex; align-items: center; gap: 20px; background: #f0f0f0; padding: 10px;">
    <div style="background: #2d8cf0; color: white; padding: 10px;">項目 A</div>
    <div style="background: #19be6b; color: white; padding: 10px;">項目 B</div>
</div>

gap: 20px 的效果是 水平（左右） 的間距。

「為什麼是水平？」

這是由 display: flex; 決定的：

預設方向：在 CSS 中，當你設定 display: flex; 且沒有額外寫 flex-direction 時，它的預設值是 row（橫向排列）。

排列邏輯：因為元素是橫著排成一列，所以 gap 自然就產生在左右相鄰的元素之間。

  • 分別貼齊左右側

用 el-col 排版

<!-- 標題與返回連結 -->
<el-row style="width:100%; height:35px; margin-bottom:15px; display:flex; justify-content:space-between; align-items:center; padding-top:10px;">

    <!-- 左側標題 -->
    <el-col :span="12" style="display:flex; justify-content:flex-start; align-items:center; padding-left:20px;">
        <h2 style="margin:0; color:#333; font-size:18px; font-weight:bold;">
            分享學校課網
        </h2>
    </el-col>

    <!-- 右側返回 -->
    <el-col :span="12" style="display:flex; justify-content:flex-end; align-items:center; padding-right:20px;">
        <a href="javascript:void(0)" @click="closeTestPage" style="color:#2d8cf0; text-decoration:none; font-size:14px; display:flex; align-tems:center;">
            <Icon type="md-arrow-round-back" style="margin-right:5px; font-size:16px;" />
            返回
        </a>
    </el-col>
</el-row>
  • display:flex 預設就是水平排列

因為 flex-direction 的預設值是：

flex-direction: row;

也就是 主軸 = 水平軸，元素就會自然「從左排到右」。

flex-basis: 100%

占滿整行

一般作為 寬度的設定——

但更精準地說，它是 Flex item 在分配空間時的“基準大小”。

如果你的 flex 方向是：

row（預設） → flex-basis 表現得像「寬度」

column → flex-basis 表現得像「高度」

display: flex;
justify-content: center;
flex-basis: 100%;

✔ flex-basis: 100% → 元素在 flex container 裡佔整列

✔ justify-content: center → 讓裡面的東西置中

自動縮放

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** ⚠️