一、簡介
- 1.1闸英、flex 布局 (Flexible布局枚驻，彈性布局)是在小程序里面常用的布局方式
官方文檔：flexbox
官方文檔：align - 1.2首妖、開啟了 flex 布局元素叫做 flex container(里面的元素叫做flex items)
- 1.3、設(shè)置 display屬性為 flex 或者 inline-flex 也可以成為 flex container
flex：flex container以block-level形式存在
inline-flex：flex container以inline-level形式存在
二塔次、CSS常用屬性
-
2.1方篮、應(yīng)用在
flex container上的CSS屬性：flex-flow、flex-direction励负、flex-wrap藕溅、justify-content、align-items继榆、align-content
flex 布局模型如下：
flex 布局模型-
<1>巾表、flex-direction (決定了 main axis(主軸) 的方向)
flex items 默認(rèn)都是沿著main axis(主軸)從main start開始往main end方向排布
flex-direction：決定了 main axis(主軸) 的方向，有 4 個取值row(默認(rèn)值)略吨、row-reverse集币、column、column-reverse
row
row-reverse
column
column-reverse -
<2>翠忠、justify-content 決定了flex items 在 main axis 上的對齊方式鞠苟，取值如下：
justify-content取值flex-start(默認(rèn)值)：與 main start 對齊
flex-end：與 main end 對齊
center：居中對齊
space-between：flex items之間的距離相等，flex items與main start秽之、main end 兩端對齊
space-evenly：flex items之間的距離相等当娱，flex items與main start、main end之間的距離等于flex items之間的距離
space-around：flex items之間的距離相等考榨，flex items與main start趾访、main end之間的距離等于flex items之間的距離的一半 -
<3>、align-items 決定了flex items 在 cross axis 上的對齊方式董虱，取值如下：
align-items取值
stretch(默認(rèn)值)：當(dāng)flex items在 cross axis 方向上的size為auto時扼鞋，會自動拉伸填充 flex container
flex-start：flex items與cross start對齊
flex-end：flex items與cross end對齊
center：居中對齊
baseline：與基準(zhǔn)線對齊 <4>申鱼、flex-wrap 決定了 flex container 是單行還是多行
nowrap(默認(rèn))：單行
wrap：多行
wrap-reverse：多行(對比wrap,cross start與cross end 相反)-
<5>、flex-flow ：是
flex-direction || flex-wrap的簡寫云头，如下
flex-flow:column wrap 等價于 => 如下flex-direction:column flex-wrap:wrapflex-flow:row reverse 等價于 => 如下
flex-direction:row reverse flex-wrap:nowrapflex-flow:wrap 等價于 => 如下
flex-direction:row flex-wrap:wrap -
<6>捐友、align-content 決定了多行 flex items 在 cross axis 上的對齊方式，用法與justify-content類似
align-content取值
stretch(默認(rèn)值)：與 align-items 的 stretch 類似
flex-start：與 cross start 對齊
flex-end：與 cross end 對齊
center：居中 對齊
space-between：flex items之間的距離相等溃槐；flex items與cross start匣砖、cross end兩端對齊
space-around：flex items之間的距離相等；flex items與cross start昏滴、cross end之間的距離是flex items之間距離的一半
space-evenly：flex items之間的距離相等猴鲫；flex items與cross start、cross end之間的距離是flex items之間距離的一半
-
-
2.2谣殊、應(yīng)用在
flex items上的CSS屬性：flex拂共、flex-grow、flex-basis姻几、flex-shrink宜狐、order、align-self-
<1>蛇捌、order 決定了 flex items的排布順序：可以設(shè)置任意整數(shù)(如：正整數(shù)抚恒、負(fù)整數(shù)、0)络拌，值越小就越排在前面俭驮，默認(rèn)值是0,如下代碼，因為 3 的order最大春贸，其他的都是默認(rèn)0表鳍，所以 3 排在最后
order<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>測試?yán)?lt;/title> <style> .container { border: 1px solid #000; width: 200px; height: 400px; margin-left: 20px; margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; } .item { width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; } .item:nth-of-type(1) { background-color: #f00; } .item:nth-of-type(2) { background-color: #0f0; } .item:nth-of-type(3) { background-color: #00f; order: 1; } .item:nth-of-type(4) { background-color: #0ef; } .item:nth-of-type(5) { background-color: #a0f; } </style> </head> <body> <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> </body> </html> <2>、align-self
flex items 可以通過 align-self 覆蓋 flex container 設(shè)置的 align-items
auto(默認(rèn)值)：遵從 flex container 的 align-items設(shè)置
stretch祥诽、flex-start譬圣、flex-end、center雄坪、baseline厘熟，效果跟 align-items 一致-
<3>、flex-grow：決定了 flex items 如何沿主軸方向 擴(kuò)展
(1)维哈、可以設(shè)置任意非負(fù)數(shù)子(正小數(shù)绳姨、正整數(shù)、0)阔挠，默認(rèn)值是0飘庄；當(dāng)
flex container在main axis 方向上有剩余 size 的時候，flex grow的屬性才會生效-
(2)购撼、如果所有的 flex items 的 flex-grow 總和sum 超過 1跪削，每個flex item擴(kuò)展的size為flex container的剩余
size * flex-grow / sum提示：sum指的是 所有flex item的flex-grow 之和
(3)谴仙、如果所有的 flex items 的 flex-grow 總和sum 不超過 1，每個flex item擴(kuò)展的size為flex container的剩余
size * flex-grow(4)碾盐、 flex items 擴(kuò)展后的最終 size 不能超過
max-width/max-height
-
<4>晃跺、flex-shrink：決定了 flex items 如何沿主軸方向 收縮
(1)、可以設(shè)置任意非負(fù)數(shù)子(正小數(shù)毫玖、正整數(shù)掀虎、0)，默認(rèn)值是1付枫；當(dāng)
flex container在main axis 方向上超過了flex container的 size 時候烹玉，flex shrink的屬性才會生效-
(2)、每個 flex items 收縮的 size為 flex items超出flex container的size * 收縮比例 / 所有 flex items 的收縮比例之和
提示：
- (1)阐滩、每個flex item的flex-shrink之和>=1才是：每個 flex items 收縮的 size為 flex items超出flex container的size * 收縮比例 / 所有 flex items 的收縮比例之和
- (2)二打、每個flex item的flex-shrink之和 < 1 則：每個 flex items 收縮的 size為 flex items超出flex container的size* flex-shrink之和 * 收縮比例 / 所有 flex items 的收縮比例之和
- (2)比(1)多一個
* flex-shrink之和
(3)、收縮比例 = flex-shrink * flex-item 的base size叶眉，base size 就是 flex item 放入 flex container 之前的 size
(4)、 flex items 最終收縮的 size 不能小于
max-width/max-height
提示
收縮比例** = flex-shrink * flex-item 的base size芹枷，對于 base的size要看main axis 方向來決定是 width還是height -
<5>衅疙、flex-basis：用來設(shè)置 flex items 在main axis 方向的base size，如果main axis 方向是寬：那么base size設(shè)置的就是寬度鸳慈；如果main axis 方向是高：那么base size設(shè)置的就是高度饱溢。
- auto(默認(rèn)值)、content：取決于內(nèi)容本身的size
- 決定 flex items 最終base size的因素走芋，從優(yōu)先級高到低
(1)： max-width/max-height/min-width/max-height
(2)：flex-basis
(3)：width/height
(4)：內(nèi)容本身的 size (前三個沒有設(shè)置的情況下绩郎，4 生效)
-
<6>、
flex是flex-growflex-shrink?||flex-basis的簡寫翁逞，其中?表示可有可無肋杖，||表示flex-shrink和flex-basis可以出現(xiàn)一個- flex 默認(rèn)值是：
0 1 auto - 取值
none是0 0 auto
- flex 默認(rèn)值是：
-
三、應(yīng)用在 flex container 和 flex items 上的CSS屬性的總結(jié)
- 3.1挖函、 flex container
- <1>状植、flex-flow 是 flex-direction || flex-wrap 的簡寫
- <2>、flex-direction 設(shè)置主軸 (main axis) 的方向
- <3>怨喘、flex-wrap 設(shè)置是否能換行
- <4>津畸、justify-content 設(shè)置 flex items 在 main axis 上的對齊方式
- <5>、align-items 設(shè)置 flex items 在cross axis 上的對齊方式(一般是針對單行)
- <6>必怜、align-content 設(shè)置 flex items 在 cross axis 上的對齊方式 (一般是針對多行)
- 3.2肉拓、 flex items
- <1>、flex 是
flex-growflex-shrink?||flex-basis的簡寫 - <2>梳庆、flex-grow 決定了flex items 在main axis 方向如何擴(kuò)展
- <3>暖途、flex-shrink 決定了 flex items 在 main axis 方向上如何收縮
- <4>卑惜、flex-basis 設(shè)置 flex items 在main axis 方向上的 base size(具體是寬還高要根據(jù)main axis來決定)
- <5>、order 設(shè)置flex items 的排布順序
- <6>丧肴、align-self 允許 flex items 覆蓋 flex cintainer設(shè)置的 align-items
- <1>、flex 是
