[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> ```  #### 垂直放置 ``` <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> ```  ## 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> ```  ## 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> <!--由于自带的值只有1,可以自定义,宽度可以定义一个最小值--> <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 ..."> <!-- This item will grow or shrink as needed --> </div> <div class="flex-shrink w-64 h-16 ..."> <!-- This item will shrink --> </div> <div class="flex-grow w-16 h-16 ..."> <!-- This item will grow or shrink as needed --> </div> </div> ``` ## Order 用来控制 flex 项目排列顺序的功能类 | Class | Properties | | --- | --- | | order-1 | order: 1; | | order-2 | order: 2; | |...|...|