- 主軸和側(cè)軸
- 注意：
flex：將一個容器設(shè)置為塊伸縮容器
inline-flex：將一個容器設(shè)置為內(nèi)聯(lián) 伸縮容器 - 注意：設(shè)為 Flex 布局以后，css的columns在伸縮容器上將失效；子元素的float、clear和vertical-align屬性將失效。
- 主軸方向問題
-
1.1 在伸縮布局中, 默認(rèn)伸縮項是從左至右的排版的
display: flex; -
1.2 主軸的排版的方向默認(rèn)就是row, 默認(rèn)就是從左至右
flex-direction: row; -
1.3. 修改主軸的排版方向為從右至左
flex-direction: row-reverse; 1.4 告訴系統(tǒng)把主軸的方向改為垂直方向
注意點:
-
1.5 默認(rèn)情況下主軸是水平方向的, 但是也可以修改為垂直方向。
只要看到flex-direction: column -
或者
column-reverse就代表主軸被修改為了垂直方向 1.6 如果將主軸修改為了垂直方向, 那么側(cè)軸就會自動從垂直方向轉(zhuǎn)換為水平方向
-
修改主軸的排版方向為從上至下
flex-direction: column; -
修改主軸的排版方向為從下至上
flex-direction: column-reverse;
- 主軸對齊方式
- 2.1 主軸
- 用于設(shè)置伸縮項主軸上的對齊方式！
- 如果設(shè)置為flex-start, 代表告訴系統(tǒng)伸縮項和主軸的起點對齊
justify-content:取值；
- 2.2 伸縮項和主軸的起點對齊
justify-content: flex-start;
- 2.3 伸縮項和主軸的終點對齊
justify-content: flex-end;
- 2.3 居中對齊
justify-content: center;
- 2.4 兩端對齊
justify-content: space-between;
- 2.5 環(huán)繞對齊：每個項目兩側(cè)的間隔相等
justify-content: space-around;
-
2.6 總結(jié)：
語法：*justify-content:flex-start|flex-end|center|space-between|space-around* flex-start：伸縮項目向一行的起始位置靠齊
flex-end：伸縮項目向一行的結(jié)束位置靠齊
center：伸縮項目向一行的中間位置靠齊
space-between：伸縮項目會平均的分布在行里
space-around：伸縮項目會平均地分布在行里，兩端保留一半的空間
示例鏈接：
http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial
- 側(cè)軸對齊方式
3.1 側(cè)軸
通過align-items可以修改側(cè)軸的對齊方式
默認(rèn)情況下是以側(cè)軸的起點對齊3.2 以側(cè)軸的起點對齊
align-items: flex-start;
- 3.3 以側(cè)軸的終點對齊
align-items: flex-end;
- 3.4 以側(cè)軸的中線對齊
align-items: center;
- 3.5 基線對齊
align-items: baseline;
- 3.6 拉伸對齊
align-items: stretch;
- 注意點:
和主軸不同的是, 側(cè)軸沒有兩端對齊和環(huán)繞對齊
3.7 總結(jié)：
-
align-items和justify-content相呼應(yīng)。align-items調(diào)整伸縮項目在側(cè)軸上的定位方式，主要用來定義伸縮項目可以在伸縮容器的當(dāng)前行的側(cè)軸對齊方式。
* 語法：align-items:flex-start|flex-end|center|baseline|stretch flex-start：伸縮項目在側(cè)軸起點邊的外邊距緊靠住該行在側(cè)軸起始邊
flex-end：伸縮項目在側(cè)軸終點邊的外邊距靠住該行在側(cè)軸終點邊
center：伸縮項目的外邊距盒在該行的側(cè)軸上居中放置
baseline：伸縮項目根據(jù)伸縮項目的基線對齊
stretch：默認(rèn)值，伸縮項目拉伸填充整個伸縮容器
(伸縮項目設(shè)置寬度或者高度之后不會被拉伸）
示例：
http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch
http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=auto3.8 注意點：
如果在伸縮容器中通過 align-items 修改側(cè)軸的對齊方式, 是修改所有伸縮項側(cè)軸的對齊方式
如果是在伸縮項中通過 align-self 修改側(cè)軸的對齊方式, 是單獨修改當(dāng)前伸縮項側(cè)軸的對齊方式
align-self屬性的取值和align-items一樣
- 伸縮換行flex-wrap
- 在伸縮布局中, 如果伸縮容器的寬度不夠, 系統(tǒng)會自動壓縮伸縮項的寬度, 保證所有的伸縮項都能放在伸縮容器中
- 如果當(dāng)伸縮容器寬度不夠時, 不想讓伸縮項被壓縮, 也可以讓系統(tǒng)換行flex-wrap: wrap;
- 默認(rèn)情況下如果伸縮容器的高度比換行之后所有伸縮項的高度還要高, 那么系統(tǒng)會自動將剩余空間平分之后添加給每一行
寬度不夠也不換行, 默認(rèn)取值
flex-wrap: nowrap;
寬度不夠也不換行, 默認(rèn)取值
flex-wrap: wrap;
如果當(dāng)伸縮容器寬度不夠時, 不想讓伸縮項被壓縮, 也可以讓系統(tǒng)換行flex-wrap:
flex-wrap: wrap-reverse;
伸縮容器多行顯示，ltr排版下，伸縮項目從右向左排列；
rtl排版下，伸縮項目從左往右排列（與wrap相反）
總結(jié)：
- nowrap：伸縮容器單行顯示，ltr排版下，伸縮項目從左到右排列；rtl排版下，伸縮項目從右向左排列（默認(rèn)值）
- wrap：伸縮容器多行顯示，ltr排版下，伸縮項目從左到右排列；rtl排版下伸縮項目從右向左排列。
- wrap-reverse：伸縮容器多行顯示，ltr排版下，伸縮項目從右向左排列；rtl排版下，伸縮項目從左往右排列（與wrap相反）
- 堆棧伸縮行align-content
align-content屬性會更改flex-wrap的行為，和align-items相似，但不是對齊伸縮項目，它對齊的是伸縮行。
align-content屬性主要用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對齊方式。
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch
如果伸縮容器中的伸縮項換行了, 那么我們就可以通過align-content來設(shè)置行與行之間的對齊方式
默認(rèn)情況下?lián)Q行就是就是拉伸對齊
一定要注意: 在換行中的拉伸對齊是指, 所有行的高度總和要和伸縮容器的高度一樣。
所以會將多余的空間平分之后添加給每一行
參數(shù)說明：
- flex-start：各行向伸縮容器的起點位置堆疊
- flex-end：各行向伸縮容器的結(jié)束位置堆疊
- center：各行向伸縮容器的中間位置堆疊
- space-between：各行在伸縮容器中平均分布
- space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間
- stretch：默認(rèn)值，各行將會伸展以占用額外的空間
- 伸縮項排序
- 如果想調(diào)整伸縮布局中伸縮項的順序, 那么我們可以通過修改伸縮項的order屬性來實現(xiàn)
- 默認(rèn)情況下order的取值是0
- 如果我們設(shè)置了order屬性的值, 那么系統(tǒng)就會按照設(shè)置的值從小到大的排序
- 伸縮項放大比例
-
flex-grow作用:
當(dāng)所有伸縮項寬度的總和沒有伸縮容器寬度大的時, 我們可以通過flex-grow讓系統(tǒng)調(diào)整伸縮項的寬度, 以便于讓所有伸縮項的寬度的總和等于伸縮容器的寬度2.flex-grow計算公式 2.1計算剩余的空間 伸縮容器寬度 - 所有伸縮項的寬度 400 - 300 = 100 2.2計算每份剩余空間的寬度 剩余空間 / 需要的份數(shù) 100 / 6 = 16.66 2.3計算每個伸縮項最終的寬度 伸縮項的寬度 + 需要的份數(shù) * 每份的寬度 注意點: flex-grow默認(rèn)值是0 如果伸縮項目的flex-grow設(shè)置為1，每個伸縮項目將設(shè)置一個大小 相等的額外空間。如果給其中一個伸縮項目設(shè)置flex-grow設(shè)置為2， 這個伸縮項目所占的額外空間是其他伸縮項目所占額外空間的2倍。 也可以這樣理解，把上例各項目的flex-grow值加起來等于4，就是把 額外空間分成4份，比例為1的占1份，比例為2的占2份。
8、伸縮項縮小比例
- flex-shrink作用:
- 當(dāng)所有伸縮項寬度的總和比伸縮容器寬度大的時, 我們可以通過flex-shrink讓系統(tǒng)調(diào)整伸縮項的寬度, 以便于讓所有伸縮項的寬度的總和等于伸縮容器的寬度
2.計算每個伸縮項需要壓縮的寬度
2.1計算溢出的寬度
伸縮容器的寬度 - 所有伸縮項的寬度總和
400 - 600 = -200
2.2計算總權(quán)重
每個伸縮項需要的份數(shù) * 每個伸縮項的寬度
1 * 200 + 2 * 200 + 3 * 200 = 1200
2.3計算每個伸縮項需要壓縮的寬度
溢出的寬度 * 需要的份數(shù) * 每個伸縮項的寬度 / 總權(quán)重
-200 * 1 * 200 / 1200 = -33.33
注意點:
flex-shrink: 默認(rèn)值是1
與flex-grow類似，也是處理伸縮容器額外空間的屬性，不同的是，flex-
grow處理的是伸縮容器內(nèi)部剩下的額外空間，而flex-shrink處理的是伸
縮容器外部溢出的額外空間。上例中將溢出的額外空間分成4份，收縮
比例為1的占1份，收縮比例為2的占2份，如果不設(shè)置收縮比例，默認(rèn)的
比例為1。
9、伸縮項放大縮小比例
如果有伸縮項沒有設(shè)置flex-grow, 那么系統(tǒng)會保持原有的寬度
而會將多余的寬度等分之后, 按照每個伸縮項需要的份數(shù)添加給它們
如果想讓某個伸縮項不縮小, 那么需要將它的flex-shrink設(shè)置為0
10、伸縮項寬度
如果是伸縮布局, 除了可以通過元素的width屬性來設(shè)置寬度以外, 還可以通過flex-basis屬性來設(shè)置伸縮項的寬度
- 注意點:
1.width屬性可以設(shè)置寬度 / flex-basis也可以設(shè)置寬度
那么如果兩者同時存在, 系統(tǒng)會聽flex-basis的
2.flex-basis屬性是專門提供給伸縮布局使用的
3.如果同時通過這兩個屬性設(shè)置了寬度, 但是其中一個是auto, 那么系統(tǒng)會按照具體值來設(shè)置
- 伸縮項屬性簡寫：
flex: flex-grow flex-shrink flex-basis;
默認(rèn)值:
flex: 0 1 auto;
注意點:
在連寫格式中, flex-shrink flex-basis是可以省略的
/*
flex: 1 1 200px;
*/
flex: 1;