一.什么是Flex布局
Flex布局可以：簡便、完整、響應(yīng)式的實(shí)現(xiàn)各種頁面布局。
Flex是Flexible box的縮寫，意為彈性布局，用來為盒子模型提供最大的靈活性。
二.Flex布局使用
-
Flex使用語法
任何一個容器都可以指定為Flex布局，使用方法如下：
.box {
display:flex;
}
行內(nèi)元素也可以使用Flex布局：
.box {
display:inline-flex;
}
????????使用Flex布局后，子元素的float、clear、vertical-align屬性將失效。
- 基本概念
采用Flex布局的元素，稱為Flex容器，簡稱容器，它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目，簡稱項(xiàng)目
- 容器默認(rèn)存在兩根軸：
水平的主軸(main axis)和垂直的交叉軸(cross axis)； - 主軸的開始位置(與邊框的交叉點(diǎn))叫
main start，結(jié)束位置叫main end； - 交叉軸的開始位置叫
cross start，結(jié)束位置叫cross end； - 項(xiàng)目默認(rèn)沿主軸排列，單個項(xiàng)目占據(jù)的主軸空間叫作
main size，占據(jù)的交叉軸空間叫作corss size； - 簡化：
x軸為主軸、y軸為交叉軸；
三.容器的屬性
- 所有屬性概述
Flex容器一共有六大屬性，如下：
-
flex-direction：內(nèi)部元素的排列方式：從左到右、從右到左、從上到下、從下到上； -
flex-wrap：子元素的換行方式：不換行、換行(第一行在上面、第二行在上面)； -
flex-flow：子元素的排列方式和換行方式的簡寫； -
justify-content：子元素的水平對齊方式； -
align-items：子元素的垂直對齊方式； -
align-content：設(shè)置多個元素組成的整塊的對齊方式；
flex-direction
flex-direction決定主軸的方向(即項(xiàng)目的排列方向)，簡化：內(nèi)部元素的排列方式---->(從左到右、從右到左、從上到下、從下到上)。
.box {
flex-direction:row | row-reverse | column | column-reverse;
}
圖示：
下面以一個代碼為例，表示四個方向的排列：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex</title>
</head>
<body>
<div class="div">
<div class="divC" style="width: 100px;height: 100px;background-color: aqua;"></div>
<div class="divC" style="width: 100px;height: 100px;background-color: black;"></div>
<div class="divC" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<style type="text/css">
.div{
/* 設(shè)置為flex布局 */
display: flex;
/* 默認(rèn):從左往右 */
flex-direction: row;
/* row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。 */
}
</style>
</body>
</html>
上面的flex-direction為row時效果：
上面的
flex-direction為row-reverse時效果：
上面的
flex-direction為column時效果：
上面的
flex-direction為column-reverse時效果：
flex-wrap
默認(rèn)情況下，項(xiàng)目都排在一條線(軸線)上，flex-wrap定義如果一條軸線排不下，如何換行。簡化為：
子元素的換行方式：不換行、換行(第一行在上面、第二行在上面)
.box {
flex-wrap:nowrap | wrap | warp-reverse;
}
nowraop(默認(rèn)) 不換行 ：
warp 換行(第一行在上)：
wrap-reverse 換行(第二行在上)：
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為：row nowrap。簡化：是子元素的排列方式和換行方式的簡寫。
.box {
flex-flow:<flex-direction> || <flex-wrap>;
}
justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。簡化：設(shè)置子元素的水平對齊方式
.box {
justify-content:flex-start | flex-end | center | space-between | space-around;
}
圖示：
詳細(xì)說明：
-
flex-start(默認(rèn)值)：左對齊 -
flex-end：右對齊 -
center：居中 -
space-between：兩端對齊，項(xiàng)目之間的間隔相等 -
space-around：每個項(xiàng)目兩側(cè)的間隔相等，所以，項(xiàng)目之間的間隔比的項(xiàng)目與邊框的間隔大一倍
-
align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對齊。簡化：設(shè)置子元素的垂直對齊方式
格式：
.box {
align-items:flex-start | flex-end | center | baseline | stretch;
}
圖示：
詳細(xì)說明：
-
flex-start：交叉軸的起點(diǎn)對齊(頂部對齊) -
flex-end：交叉軸的終點(diǎn)對齊(底部對齊) -
center：交叉軸的中點(diǎn)對齊(垂直對齊) -
baseline：項(xiàng)目的第一行文字的基線對齊(基于內(nèi)部第一行文本對齊) -
stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置成高度或設(shè)為auto，將占滿整個容器的高度(高度占滿整個容器)
align-content
align-content屬性定義了多根軸線的對齊方式，如果項(xiàng)目只有一根軸線，該屬性不起作用。簡化：設(shè)置多個元素組成的整塊的對齊方式
格式：
.box {
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
圖示：
詳細(xì)說明：
-
flex-start：與交叉軸的起點(diǎn)對齊(頂部對齊) -
flex-end：與交叉軸的終點(diǎn)對齊(底部對齊) -
center：與交叉軸的中點(diǎn)對齊(居中對齊) -
sapce-between：與交叉軸兩端對齊，軸線之間的間隔平均分布 -
space-around：每根軸線兩側(cè)的間隔相等，所以軸線之間的間隔比軸線與邊框之間的間隔大 -
stretch(默認(rèn)值)：軸線占滿整個交叉軸(高度占滿整個容器)
四.項(xiàng)目(子元素)的屬性
- 所有屬性概述
-
order：按照數(shù)字大小設(shè)置各個元素之間的排列方式 -
flex-grow：按照權(quán)重分配剩余空間進(jìn)行等比例放大 -
flex-shrink：按照權(quán)重進(jìn)行等比例縮小 -
felx-basis：設(shè)置子元素原始所占主軸空間大小(寬度) -
flex：設(shè)置放大、縮小和原始大小的縮寫，建議優(yōu)先使用此方式 -
align-self：單獨(dú)設(shè)置特定元素的對齊方式，忽略align-items
-
order
order屬性定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)為0。
簡化：按照數(shù)字大小設(shè)置各個元素之間的排列方式
格式：
.item {
order:<integer>;
}
圖示：
-
flex-grow
flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。簡化：按照權(quán)重分配剩余空間進(jìn)行等比例放大
格式：
.item{
flex-grow:<number>;
}
??????
如果所有項(xiàng)目的flex-grow都為1，那么它們將均勻分配剩余空間。
如果某個項(xiàng)目flex-grow為2，其余項(xiàng)目為1，那么前者分配到的空間將比后者大一倍。
圖示：
-
flex-shrink
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。簡化：按照權(quán)重進(jìn)行等比例縮小。
格式：
.item{
flex-shrink:<number>;
}
??????
負(fù)值是一個無效的數(shù)值；
如果某個項(xiàng)目屬性值為0，那么該項(xiàng)目將不會縮小，而是讓其它項(xiàng)目縮小。
圖示：
-
flex-basis
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間main size；
瀏覽器根據(jù)這個屬性計算是否有多余空間，默認(rèn)值為auto，即項(xiàng)目本來大小。
簡化：設(shè)置子元素原始所占主軸空間大小(寬度)。
??????
它可以設(shè)為跟width或height一樣的值，那么項(xiàng)目將會占據(jù)固定空間
格式：
.item{
flex-basis:<length> | auto;
}
-
flex
flex屬性是flex-grow，flex-shrink，flex-basis的簡寫，默認(rèn)值為“0 1 auto”，后兩個屬性可選。
簡化：設(shè)置放大、縮小、原始大小的簡寫，建議優(yōu)先使用該方式
??????
該屬性有兩個快捷值：“auto(1 1 auto)”、“none(0 0 auto)”，建議優(yōu)先寫這兩個快捷值。
格式：
.item {
flex:none | [<flex-grow> <flex-shrink> <flex-basis>];
}
-
align-self
align-self屬性允許單個項(xiàng)目與其他項(xiàng)目有不一樣的對齊方式，可以覆蓋align-items屬性，默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，那么等同于stretch
簡化：單獨(dú)設(shè)置特定元素的方式，忽略align-items
格式：
.item {
align-self:auto | flex-start | flex-end | center | baseline | stretch;
}
圖示：
