一怀浆、css的布局模式

css2.1中定義了四種布局模式，由一個(gè)盒與其兄弟候生、祖先盒的關(guān)系決定其尺寸與位置的算法纱皆。

• 塊布局：呈現(xiàn)文檔的布局模式
• 行內(nèi)布局：呈現(xiàn)文本的布局模式
• 表格布局：用格子呈現(xiàn)2D數(shù)據(jù)的布局模式
• 定位布局：定位元素的布局模式拇惋，定位元素基本與其它元素?zé)o關(guān)

css3引入的布局模式flexbox布局，主要思想是讓容器有能力讓其子項(xiàng)目能夠改變其寬度抹剩、高度（甚至順序）撑帖，以最佳的方式填充可用空間（主要是為了適應(yīng)所有類型的顯示設(shè)備和屏幕大小）澳眷。Flex容器會(huì)使子項(xiàng)目（伸縮項(xiàng)目）擴(kuò)展來填滿可用空間胡嘿，或縮小他們以防止溢出容器。

二钳踊、Flexbox模型的功能

Flexbox布局對(duì)于設(shè)計(jì)比較復(fù)雜的頁面非常有用衷敌，可輕松地實(shí)現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時(shí)保持元素的相對(duì)位置和大小不變。同時(shí)減少了依賴于浮動(dòng)布局實(shí)現(xiàn)元素位置的定義以及重置元素的大小拓瞪。

特點(diǎn)：

• 屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活地調(diào)整布局
• 指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外的空間缴罗，從而調(diào)整伸縮項(xiàng)目的大小
• 指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外的空間，分配到伸縮項(xiàng)目之前祭埂、之后或之間面氓。
• 指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍
• 控制元素在頁面上的布局方向
• 按照不同于文檔對(duì)象模型（DOM）所指定的排序方式對(duì)屏幕上的元素重新排序

三、Flexbox模型中的術(shù)語

1蛆橡、主軸和側(cè)軸

伸縮布局偏向使用伸縮流的方向舌界。
1）主軸、主軸方向：用戶代理沿著一個(gè)伸縮容的主軸配置伸縮項(xiàng)目泰演，主軸是主軸方向的延伸呻拌。它不一定是水平的，主要取決于justify-content屬性睦焕。
2）主軸起點(diǎn)藐握、主軸終點(diǎn)：伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開始靴拱，往主軸終點(diǎn)邊結(jié)束。
3）主軸長(zhǎng)度猾普、主軸長(zhǎng)度屬性：伸縮項(xiàng)目在主軸方向的寬度或高度就是項(xiàng)目的主軸長(zhǎng)度
4）側(cè)軸袜炕、側(cè)軸方向：與主軸垂直的軸稱作側(cè)軸，側(cè)軸是側(cè)軸方向的延伸抬闷，主要取決于主軸方向妇蛀。
5）側(cè)軸起點(diǎn)耕突、側(cè)軸終點(diǎn)：填滿項(xiàng)目的伸縮行的配置從容器的側(cè)軸起點(diǎn)邊開始笤成，往側(cè)軸終點(diǎn)邊結(jié)束。
6）側(cè)軸長(zhǎng)度眷茁、側(cè)軸長(zhǎng)度屬性：伸縮項(xiàng)目在側(cè)軸方向的寬度和高度就是項(xiàng)目的側(cè)軸長(zhǎng)度

2炕泳、伸縮容器和伸縮項(xiàng)目

通過display屬性給一個(gè)元素設(shè)置為flex或者inline-flex，這個(gè)容器就是一個(gè)伸縮容器上祈。伸縮容器會(huì)為其內(nèi)容創(chuàng)立新的伸縮格式化上下文培遵，其中設(shè)置為flex的容器被渲染為塊級(jí)元素，設(shè)置為inline-flex的容器渲染為行內(nèi)元素登刺。若元素display的指定值是inline-flex且元素是一個(gè)浮動(dòng)或絕對(duì)定位元素籽腕，則display的計(jì)算值是flex。

一個(gè)伸縮容器內(nèi)具有零個(gè)以上的伸縮項(xiàng)目纸俭，伸縮容器的每個(gè)子元素都會(huì)成為一個(gè)伸縮項(xiàng)目皇耗，且用戶代理會(huì)將任何直接在伸縮容器里的連續(xù)文字塊包起來成為匿名伸縮項(xiàng)目。

3揍很、伸縮容器的屬性

Flexbox伸縮布局中伸縮容器和伸縮項(xiàng)目是伸縮布局模塊中的重要部分郎楼，其中每一部分都具有各自的屬性。
1）伸縮流方向：指伸縮容器的主軸方向窒悔，決定了伸縮項(xiàng)目放置在伸縮容器的方向呜袁。主要通過flex-direction屬性設(shè)置，默認(rèn)值為row简珠。
2）伸縮行換行：主要用來設(shè)置伸縮容器的伸縮項(xiàng)目是單行顯示還是多行顯示阶界，以及決定側(cè)軸的方向。通過flex-wrap屬性設(shè)置伸縮項(xiàng)目是否換行聋庵，默認(rèn)值為nowrap荐操。
3）伸縮方向與換行：是伸縮流方向與伸縮換行的縮寫，決定了伸縮容器的主軸與側(cè)軸珍策，通過flex-flow同時(shí)設(shè)定了伸縮流方向和伸縮換行兩個(gè)屬性托启。
4）主軸對(duì)齊：用來設(shè)置伸縮容器當(dāng)前行伸縮項(xiàng)目在主軸方向的對(duì)齊方式，指定如何在伸縮項(xiàng)目之間分布伸縮容器的額外空間攘宙。
5）側(cè)軸對(duì)齊：定義伸縮項(xiàng)目在伸縮容器的當(dāng)前行的側(cè)軸對(duì)齊方式屯耸，類似于主軸對(duì)齊拐迁。
6）堆棧伸縮行：用來定義伸縮容器中伸縮項(xiàng)目行在側(cè)軸的對(duì)齊方式，類似于側(cè)軸對(duì)齊疗绣，只不過是用來控制伸縮項(xiàng)目行在布局軸的堆放方式线召。

4、伸縮項(xiàng)目的屬性

一個(gè)伸縮項(xiàng)目是一個(gè)伸縮容器的子元素多矮，伸縮容器的文本也被視為一個(gè)伸縮項(xiàng)目缓淹。
伸縮項(xiàng)目都有一個(gè)主軸長(zhǎng)度和側(cè)軸長(zhǎng)度，主軸長(zhǎng)度是伸縮項(xiàng)目在主軸上的尺寸塔逃，側(cè)軸長(zhǎng)度是伸縮項(xiàng)目在側(cè)軸的尺寸讯壶。一個(gè)伸縮項(xiàng)目的寬度和高度取決于伸縮容器的軸。
1）顯示順序：伸縮容器中的伸縮項(xiàng)目默認(rèn)顯示順序遵循文檔在源碼中出現(xiàn)的先后順序（DOM結(jié)構(gòu)中的先后順序）湾盗》茫可以通過伸縮項(xiàng)目的顯示順序修改伸縮項(xiàng)目在頁面中的顯示順序，也可以通過這個(gè)屬性對(duì)伸縮項(xiàng)目進(jìn)行排序組合格粪。
2）側(cè)軸對(duì)齊：包含兩種躏吊，一種是align-items屬性，用來設(shè)置伸縮容器中包括匿名伸縮項(xiàng)目的所有項(xiàng)目的對(duì)齊方式帐萎；另一種是align-self屬性比伏，用來在單獨(dú)的伸縮項(xiàng)目上覆寫默認(rèn)的對(duì)齊方式。對(duì)于匿名的伸縮項(xiàng)目疆导，align-self的值與其關(guān)聯(lián)的伸縮容器的align-items的值相同赁项。
3）伸縮性：定義伸縮項(xiàng)目可改變他們的寬度或高度填補(bǔ)可用的空間，可將伸縮容器的額外空間分發(fā)給其伸縮項(xiàng)目（與伸縮項(xiàng)目的正彈性成正比）或?qū)⑺麄兛s小以防止伸縮項(xiàng)目溢出（與伸縮項(xiàng)目的負(fù)彈性成正比）是鬼。

5肤舞、伸縮行

伸縮項(xiàng)目沿著伸縮容器內(nèi)的一個(gè)伸縮行定位，伸縮容器可以是單行的均蜜，也可以是多行的李剖。主要由flex-wrap決定。

四囤耳、Flexbox模型的基本使用

1篙顺、伸縮容器display

語法：display:flex|inline-flex
參數(shù)說明：

• flex：將一個(gè)容器設(shè)置為塊伸縮容器
• inline-flex：將一個(gè)容器設(shè)置為內(nèi)聯(lián) 伸縮容器

注意：設(shè)為 Flex 布局以后，css的columns在伸縮容器上將失效充择；子元素的float德玫、clear和vertical-align屬性將失效。

2椎麦、伸縮流方向flex-direction

flex-direction適用于伸縮容器宰僧，就是伸縮項(xiàng)目的父元素。主要用來創(chuàng)建主軸观挎，從而定義了伸縮項(xiàng)目放置在伸縮容器的方向琴儿。
語法：
flex-direction：row|row-reverse|column|column-reverse

參數(shù)說明：

• row：在ltr排版方式下從左到右排列段化，在rtl排版方式下從右向左排列（默認(rèn)值）
• row-reverse：與row排列方向相反
• column：類似于row，不過是從上到下排列
• column-reverse：類似于row-reverse造成，不過是從下到上排列

3显熏、伸縮換行flex-wrap

flex-wrap屬性適用于伸縮容器，也就是伸縮項(xiàng)目的父元素晒屎，主要用來定義伸縮容器里是單行還是多行顯示喘蟆，側(cè)軸的方向，決定了新行堆放的方向鼓鲁。
語法：flex-wrap:nowrap|wrap|wrap-reverse
參數(shù)說明：

• nowrap：伸縮容器單行顯示蕴轨，ltr排版下，伸縮項(xiàng)目從左到右排列坐桩；rtl排版下尺棋，伸縮項(xiàng)目從右向左排列（默認(rèn)值）
• wrap：伸縮容器多行顯示封锉，ltr排版下绵跷，伸縮項(xiàng)目從左到右排列；rtl排版下伸縮項(xiàng)目從右向左排列成福。
• wrap-reverse：伸縮容器多行顯示碾局，ltr排版下臭埋，伸縮項(xiàng)目從右向左排列洒放；rtl排版下，伸縮項(xiàng)目從左往右排列（與wrap相反）

4栋猖、伸縮流方向與還換行flex-flow

flex-flow適用于伸縮容器蕴潦，也就是伸縮項(xiàng)目的父元素像啼，是flex-direction和flex-wrap屬性的縮寫版本，同時(shí)定義了伸縮容器的主軸和側(cè)軸潭苞，默認(rèn)值為row nowrap忽冻。
語法：flex-flow:flex-direction|flex-wrap

5、主軸對(duì)齊justify-content

主軸對(duì)齊justify-content適用于伸縮容器此疹，也就是伸縮項(xiàng)目的父元素僧诚，主要用來定義伸縮項(xiàng)目沿著主軸線的對(duì)齊方式。
當(dāng)一行的所有伸縮項(xiàng)目都不能伸縮或可伸縮但已經(jīng)達(dá)到其最大長(zhǎng)度時(shí)蝗碎，這一屬性才會(huì)對(duì)伸縮容器額外的空間進(jìn)行分配湖笨。當(dāng)伸縮項(xiàng)目溢出某一行時(shí)，這一屬性也會(huì)在項(xiàng)目的對(duì)齊上施加一些限制蹦骑。

語法：justify-content:flex-start|flex-end|center|space-between|space-around
參數(shù)說明：

• flex-start：伸縮項(xiàng)目向一行的起始位置靠齊
• flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊
• center：伸縮項(xiàng)目向一行的中間位置靠齊
• space-between：伸縮項(xiàng)目會(huì)平均的分布在行里
• space-around：伸縮項(xiàng)目會(huì)平均地分布在行里慈省，兩端保留一半的空間

示例鏈接：justify-content

6、側(cè)軸對(duì)齊align-items和align-self

設(shè)置伸縮項(xiàng)目在側(cè)軸的對(duì)齊方式有兩種：一種是伸縮項(xiàng)目行在側(cè)軸的對(duì)齊方式眠菇，主要由屬性align-items控制边败；另一種是伸縮項(xiàng)目自身在側(cè)軸的對(duì)齊方式清钥，主要由屬性align-self控制。

align-items和justify-content相呼應(yīng)放闺。align-items調(diào)整伸縮項(xiàng)目在側(cè)軸上的定位方式祟昭，主要用來定義伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸對(duì)齊方式。

align-self屬性主要是用來設(shè)置單獨(dú)伸縮項(xiàng)目在側(cè)軸的對(duì)齊方式怖侦，可以用來覆蓋該伸縮項(xiàng)目的伸縮容器的align-items屬性篡悟，屬性值和align-items一樣。

語法：align-items:flex-start|flex-end|center|baseline|stretch
參數(shù)說明：

• flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始邊
• flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)邊
• center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置
• baseline：伸縮項(xiàng)目根據(jù)伸縮項(xiàng)目的基線對(duì)齊
• stretch：默認(rèn)值匾寝，伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器搬葬。

示例鏈接：align-items ???? align-self

7、堆棧伸縮行align-content

align-content屬性會(huì)更改flex-wrap的行為艳悔，和align-items相似急凰，但不是對(duì)齊伸縮項(xiàng)目，它對(duì)齊的是伸縮行猜年。
align-content屬性主要用來調(diào)準(zhǔn)伸縮行在伸縮容器里的對(duì)齊方式抡锈。
語法：align-content:flex-start|flex-end|center|space-between|space-around|stretch
參數(shù)說明：

• flex-start：各行向伸縮容器的起點(diǎn)位置堆疊
• flex-end：各行向伸縮容器的結(jié)束位置堆疊
• center：各行向伸縮容器的中間位置堆疊
• space-between：各行在伸縮容器中平均分布
• space-around：各行在伸縮容器中平均分布，在兩邊各有一半的空間
• stretch：默認(rèn)值乔外，各行將會(huì)伸展以占用額外的空間

示例鏈接：align-content

提示：這個(gè)屬性只有伸縮項(xiàng)目有多行時(shí)才生效床三，這種情況只有display的flex-wrap為wrap時(shí)，并且沒有足夠的空間把伸縮項(xiàng)目行放在同一行中杨幼。這個(gè)屬性將對(duì)每一行起作用撇簿，而不是每個(gè)伸縮項(xiàng)目。

8差购、伸縮性flex

flex屬性是讓伸縮項(xiàng)目可伸縮四瘫，讓伸縮項(xiàng)目的寬度和高度自動(dòng)填充伸縮容器額外的空間。一個(gè)伸縮容器會(huì)等比地按照各伸縮項(xiàng)目的擴(kuò)展比率分配額外的空間欲逃，也會(huì)按照收縮比率縮小各伸縮項(xiàng)目以避免伸縮項(xiàng)目溢出伸縮容器找蜜。

flex屬性可以用來指定可伸縮長(zhǎng)度的部件，擴(kuò)展比率暖夭、收縮比率锹杈、以及伸縮基準(zhǔn)值。
當(dāng)一個(gè)元素是伸縮項(xiàng)目時(shí)迈着，flex屬性將代替主軸長(zhǎng)度屬性決定元素的主軸長(zhǎng)度竭望；若元素不是伸縮項(xiàng)目，則flex屬性沒有效果裕菠。
語法：flex:none|flex-grow|flex-shrink|flex-basis

• flex-grow:<number>(默認(rèn)值為0)咬清，設(shè)置伸縮項(xiàng)目占伸縮容器的額外空間的份數(shù)
• flex-shink：<number>(默認(rèn)值為1)，用來定義伸縮項(xiàng)目收縮的能力
• flex-basis：<length>|auto(默認(rèn)值auto)，設(shè)置伸縮項(xiàng)目的伸縮基準(zhǔn)值

9旧烧、顯示順序order

默認(rèn)狀態(tài)下影钉，元素是按照文檔流的結(jié)構(gòu)順序排列，可以通過order屬性來改變伸縮項(xiàng)目出現(xiàn)在原文檔的次序掘剪。
語法：order：<number>
order屬性透過將伸縮項(xiàng)目分到有序號(hào)的組以控制伸縮項(xiàng)目的順序平委。伸縮容器會(huì)從序號(hào)最小的組開始布局，在同一個(gè)組里伸縮項(xiàng)目依據(jù)源文檔里的次序布局夺谁。