課堂
開始
開始學習
CodeGym /Java Adesua /Frontend SELF TW /軸方向

軸方向

Frontend SELF TW
等級 17 , 課堂 2
開放

6.1 flex-direction 屬性

Flexbox 提供了靈活且強大的工具來創建響應式佈局。系統的重要部分是佈局軸，決定 Flex 元素如何排列在 Flex 容器中。我們將詳細討論 flex-direction 和 flex-wrap 屬性，這些屬性控制軸的方向和 Flex 元素在溢出時的行為。

flex-direction 屬性定義了主軸的方向，Flex 元素將沿著這個方向排列。這個方向可以是水平或垂直，也可以是正向或反向。

值：

  • row：主軸從左到右水平排列（預設值）
  • row-reverse：主軸從右到左水平排列
  • column：主軸從上到下垂直排列
  • column-reverse：主軸從下到上垂直排列

使用範例

1. 元素水平排列：

CSS
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML
    
      <div class="container-row">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

2. 元素垂直排列：

CSS
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML
    
      <div class="container-column">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

代碼解釋：

  • .container-row：元素從左到右水平排列
  • .container-row-reverse：元素從右到左水平排列
  • .container-column：元素從上到下垂直排列
  • .container-column-reverse：元素從下到上垂直排列

6.2 flex-wrap 屬性

flex-wrap 屬性決定 Flex 元素在不適合一行時是否換行/列。這在創建響應式佈局時特別有用，因為容器尺寸可能會因設備或屏幕的變化而變化。

值

  • nowrap：元素不換行，排列在一行/列中（預設值）
  • wrap：元素在需要時換行/列
  • wrap-reverse：元素反向換行/列

使用範例

值 nowrap：

元素不換行，排列在一行/列中（預設值）。

CSS
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-nowrap">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

值 wrap：

元素在需要時換行/列。

CSS
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-wrap">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

值 wrap-reverse：

元素反向換行/列。

CSS
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container-wrap-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

代碼解釋：

  • .container-nowrap：Flex 元素排列在一行，即使超出容器邊界
  • .container-wrap：Flex 元素在不適合一行時換行
  • .container-wrap-reverse：Flex 元素反向換行

6.3 flex-direction 和 flex-wrap 的使用

可以使用縮寫屬性 flex-flow 將 flex-direction 和 flex-wrap 組合起來。這個屬性允許同時設置軸的方向和元素的換行。

語法：

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

使用範例：

CSS
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML
    
      <div class="container">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
        <div class="item">元素 5</div>
      </div>

代碼解釋：

  • .container：Flex 容器使用組合的 flex-direction: row; 和 flex-wrap: wrap;，這意味著元素會水平排列並在需要時換行
留言
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION