彈性盒
文檔流：所顯即所在 優(yōu)點(diǎn)（閱讀性好 維護(hù)性好） 缺點(diǎn)（不夠靈活）
脫離文檔流 浮動(dòng)（功能單一） 定位（閱讀和維護(hù)難度高）
彈性盒葫笼，表現(xiàn)靈活 閱讀和維護(hù)性好
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成
display:flex 即設(shè)為彈性盒
父盒子定義display:flex樣式屬性
每一個(gè)子元素即變?yōu)閺椥缘暮凶恿?脫離文檔流 默認(rèn)橫排
學(xué)習(xí)彈性盒注意一個(gè)父子元素的概念 父設(shè)子規(guī)
父元素即容器上的設(shè)置項(xiàng)：
設(shè)置display:flex后的后續(xù)設(shè)置
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<span>logo</span>
<span>搜索</span>
</div>
</div>
</body>
- flex-direction 決定軸的方向
??1.row 默認(rèn)值勺爱。元素將水平顯示，正如一個(gè)行一樣瞻惋。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row;
}
??2.row-reverse 與 row 相同，但是以相反的順序邑商。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: row-reverse;
}
??3.column 元素將垂直顯示删掀，正如一個(gè)列一樣。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: column;
}
??4.column-reverse 與 column 相同嘀粱，但是以相反的順序激挪。
.nav{
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
flex-direction: column-reverse;
}
flex-wrap 控制換行情況
??1.nowrap 默認(rèn)值。規(guī)定元素不換行锋叨。
??2.wrap 規(guī)定元素在必要的時(shí)候換行垄分。
??3.wrap-reverse 規(guī)定元素在必要的時(shí)候以相反的順序換行。先按正序換行然后將行倒敘flex-flow 軸和換行的簡(jiǎn)寫
??1.flex-container { flex-flow: <flex-direction> <flex-wrap> }justify-content 以交叉?zhèn)容S為中心的集聚方式（元素在主軸方向上的對(duì)齊方式）
???1.flex-start默認(rèn)值娃磺。項(xiàng)目位于容器的開頭薄湿。
???2.flex-end項(xiàng)目位于容器的結(jié)尾。
???3.center項(xiàng)目位于容器的中心偷卧。
???4.space-between項(xiàng)目位于各行之間留有空白的容器內(nèi)豺瘤。
???5.space-around項(xiàng)目位于各行之前、之間听诸、之后都留有空白的容器內(nèi)坐求。
- align-items 以交叉橫軸為中心的擠聚方式（子元素需要設(shè)置寬高）
???1.stretch 項(xiàng)目被拉伸以適應(yīng)容器。
???2.center 項(xiàng)目位于容器的中心晌梨。
???3.flex-start 默認(rèn)值 項(xiàng)目位于容器的開頭桥嗤。
???4.flex-end 項(xiàng)目位于容器的結(jié)尾。
???5.baseline 項(xiàng)目位于容器的基線上仔蝌。
flex-item 彈性盒子元素屬性
???1.order設(shè)置彈性盒子的子元素排列順序泛领。int 默認(rèn)為0 小的在前
???2.flex-grow設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。int
???3.flex-shrink指定了 flex 元素的收縮規(guī)則敛惊。flex 元素僅在默認(rèn)寬度之和大于容器 的時(shí)候才會(huì)發(fā)生收縮渊鞋，其收縮的大小是依據(jù) flex-shrink 的值。int 默認(rèn)值1align-self在彈性子元素上使用瞧挤。覆蓋容器的 align-items 屬性锡宋。
???1.auto默認(rèn)值。元素繼承了它的父容器的 align-items 屬性特恬。如果沒(méi)有父容器則為 "stretch"员辩。
???2.stretch元素被拉伸以適應(yīng)容器。
???3.center元素位于容器的中心鸵鸥。
???4.flex-start元素位于容器的開頭奠滑。
???5.flex-end元素位于容器的結(jié)尾丹皱。
???6.baseline元素位于容器的基線上。
???7.initial設(shè)置該屬性為它的默認(rèn)值宋税。
???8.inherit從父元素繼承該屬性摊崭。
