Flex · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## Flex Direction 控制 Flex 子項的方向的功能類 | Class | Properties | | --- | --- | | flex-row | flex-direction: row; | | flex-row-reverse | flex-direction: row-reverse; | | flex-col | flex-direction: column; | | flex-col-reverse | flex-direction: column-reverse; | ### 實例 #### 水平放置 ``` <div class="flex flex-row"> <p class="bg-red-100 h-16 w-16">1</p> <p class="bg-red-200 h-16 w-16">2</p> <p class="bg-red-300 h-16 w-16">3</p> </div> ``` ![](https://img.kancloud.cn/1a/c3/1ac3f62b9a6d31660eb64441a18ea7e2_191x65.png) #### 垂直放置 ``` <div class="flex flex-col"> <p class="bg-red-100 h-16 w-16">1</p> <p class="bg-red-200 h-16 w-16">2</p> <p class="bg-red-300 h-16 w-16">3</p> </div> ``` ![](https://img.kancloud.cn/35/40/35407bba0471ca1334359aa782962668_65x194.png) ## Flex Wrap 是否阻止換行 | Class| Properties | 備注| | --- | --- |---| | flex-wrap | flex-wrap: wrap; | 換行| | flex-wrap-reverse | flex-wrap: wrap-reverse; | 翻轉換行| | flex-nowrap | flex-wrap: nowrap; | 不換行| ### 實例 #### 換行 ``` <div class="flex flex-row flex-wrap"> <p class="bg-red-100 h-48 w-48">1</p> <p class="bg-red-200 h-48 w-48">2</p> <p class="bg-red-300 h-48 w-48">3</p> <p class="bg-red-300 h-48 w-48">4</p> </div> ``` #### 不換行 ``` <div class="flex flex-row flex-nowrap"> <p class="bg-red-100 h-48 w-48">1</p> <p class="bg-red-200 h-48 w-48">2</p> <p class="bg-red-300 h-48 w-48">3</p> <p class="bg-red-300 h-48 w-48">4</p> </div> ``` 對div會進行壓縮 ## Flex 用于控制 flex 項目放大和縮小的功能類。 | Class | Properties | 備注| | --- | --- |---| | flex-1 | flex: 1 1 0%; | 允許 flex 項目根據需要放大和縮小，忽略其初始尺寸| | flex-auto | flex: 1 1 auto; |在考慮到其初始大小的情況下放大和縮小| | flex-initial | flex: 0 1 auto; |考慮到其初始尺寸的情況下縮小但不放大| | flex-none | flex: none; |一個 flex 項目的放大和縮小| ### 實例 ``` <div class="flex "> <p class="bg-red-100 flex-1 ">Short</p> <p class="bg-red-200 flex-none ">Medium length </p> <p class="bg-red-300 flex-1 ">Significantly larger amount of content </p> </div> ``` ![](https://img.kancloud.cn/5b/d9/5bd9ee8d1cfe0e04847631aaae89e8bb_775x286.png) ## flex-grow 控制 flex 項目放大的功能類 | Class | Properties | 備注| | --- | --- | ---| | flex-grow-0 | flex-grow: 0; | 阻止一個 flex 項目放大| | flex-grow | flex-grow: 1; | 一個 flex 項目放大，以填充任何可用空間| ### 實例 ```  <div class="flex w-96"> <p class="bg-red-100 flex-none ">1</p> <p class="bg-red-200 flex-grow ">2</p> <p class="bg-red-300 flex-none ">3</p> </div>  <div class="flex "> <p style="flex-grow: 10" class="bg-red-100 ">1</p> <p style="flex-grow:2" class="bg-red-200 ">2</p> <p style="flex-grow: 3" class="bg-red-300 ">3</p> </div> ``` ## Flex Shrink 控制 flex 項目縮小的功能類 | Class | Properties | 備注| | --- | --- |---| | flex-shrink-0 | flex-shrink: 0; |阻止一個 flex 項目縮小| | flex-shrink | flex-shrink: 1; |flex 項目在必要的時候縮小| ### 實例先縮放"flex-grow",當"flex-grow"縮放到 h-16時,再縮放 "flex-shrink" ``` <div class="flex ..."> <div class="flex-grow w-16 h-16 ...">  </div> <div class="flex-shrink w-64 h-16 ...">  </div> <div class="flex-grow w-16 h-16 ...">  </div> </div> ``` ## Order 用來控制 flex 項目排列順序的功能類 | Class | Properties | | --- | --- | | order-1 | order: 1; | | order-2 | order: 2; | |...|...|