一、簡(jiǎn)介
- 1.1、flex 布局 (Flexible布局，彈性布局)是在小程序里面常用的布局方式
官方文檔：flexbox
官方文檔：align - 1.2、開(kāi)啟了 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開(kāi)始往main end方向排布
flex-direction：決定了 main axis(主軸) 的方向，有 4 個(gè)取值row(默認(rèn)值)、row-reverse、column、column-reverse
row
row-reverse
column
column-reverse -
<2>、justify-content 決定了flex items 在 main axis 上的對(duì)齊方式，取值如下：
justify-content取值flex-start(默認(rèn)值)：與 main start 對(duì)齊
flex-end：與 main end 對(duì)齊
center：居中對(duì)齊
space-between：flex items之間的距離相等，flex items與main start、main end 兩端對(duì)齊
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 上的對(duì)齊方式，取值如下：
align-items取值
stretch(默認(rèn)值)：當(dāng)flex items在 cross axis 方向上的size為auto時(shí)，會(huì)自動(dòng)拉伸填充 flex container
flex-start：flex items與cross start對(duì)齊
flex-end：flex items與cross end對(duì)齊
center：居中對(duì)齊
baseline：與基準(zhǔn)線對(duì)齊 <4>、flex-wrap 決定了 flex container 是單行還是多行
nowrap(默認(rèn))：?jiǎn)涡?br>wrap：多行
wrap-reverse：多行(對(duì)比wrap,cross start與cross end 相反)-
<5>、flex-flow ：是
flex-direction || flex-wrap的簡(jiǎn)寫(xiě)，如下
flex-flow:column wrap 等價(jià)于 => 如下flex-direction:column flex-wrap:wrapflex-flow:row reverse 等價(jià)于 => 如下
flex-direction:row reverse flex-wrap:nowrapflex-flow:wrap 等價(jià)于 => 如下
flex-direction:row flex-wrap:wrap -
<6>、align-content 決定了多行 flex items 在 cross axis 上的對(duì)齊方式，用法與justify-content類(lèi)似
align-content取值
stretch(默認(rèn)值)：與 align-items 的 stretch 類(lèi)似
flex-start：與 cross start 對(duì)齊
flex-end：與 cross end 對(duì)齊
center：居中 對(duì)齊
space-between：flex items之間的距離相等；flex items與cross start、cross end兩端對(duì)齊
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,如下代碼，因?yàn)?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>測(cè)試?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 可以通過(guò) 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 的時(shí)候，flex grow的屬性才會(huì)生效-
(2)、如果所有的 flex items 的 flex-grow 總和sum 超過(guò) 1，每個(gè)flex item擴(kuò)展的size為flex container的剩余
size * flex-grow / sum提示：sum指的是 所有flex item的flex-grow 之和
(3)、如果所有的 flex items 的 flex-grow 總和sum 不超過(guò) 1，每個(gè)flex item擴(kuò)展的size為flex container的剩余
size * flex-grow(4)、 flex items 擴(kuò)展后的最終 size 不能超過(guò)
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 方向上超過(guò)了flex container的 size 時(shí)候，flex shrink的屬性才會(huì)生效-
(2)、每個(gè) flex items 收縮的 size為 flex items超出flex container的size * 收縮比例 / 所有 flex items 的收縮比例之和
提示：
- (1)、每個(gè)flex item的flex-shrink之和>=1才是：每個(gè) flex items 收縮的 size為 flex items超出flex container的size * 收縮比例 / 所有 flex items 的收縮比例之和
- (2)、每個(gè)flex item的flex-shrink之和 < 1 則：每個(gè) flex items 收縮的 size為 flex items超出flex container的size* flex-shrink之和 * 收縮比例 / 所有 flex items 的收縮比例之和
- (2)比(1)多一個(gè)
* 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，對(duì)于 base的size要看main axis 方向來(lái)決定是 width還是height -
<5>、flex-basis：用來(lái)設(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)先級(jí)高到低
(1)： max-width/max-height/min-width/max-height
(2)：flex-basis
(3)：width/height
(4)：內(nèi)容本身的 size (前三個(gè)沒(méi)有設(shè)置的情況下，4 生效)
-
<6>、
flex是flex-growflex-shrink?||flex-basis的簡(jiǎn)寫(xiě)，其中?表示可有可無(wú)，||表示flex-shrink和flex-basis可以出現(xiàn)一個(gè)- 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 的簡(jiǎn)寫(xiě)
- <2>、flex-direction 設(shè)置主軸 (main axis) 的方向
- <3>、flex-wrap 設(shè)置是否能換行
- <4>、justify-content 設(shè)置 flex items 在 main axis 上的對(duì)齊方式
- <5>、align-items 設(shè)置 flex items 在cross axis 上的對(duì)齊方式(一般是針對(duì)單行)
- <6>、align-content 設(shè)置 flex items 在 cross axis 上的對(duì)齊方式 (一般是針對(duì)多行)
- 3.2、 flex items
- <1>、flex 是
flex-growflex-shrink?||flex-basis的簡(jiǎn)寫(xiě) - <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來(lái)決定)
- <5>、order 設(shè)置flex items 的排布順序
- <6>、align-self 允許 flex items 覆蓋 flex cintainer設(shè)置的 align-items
- <1>、flex 是
