《Web前端開發(fā)基礎(chǔ)》課件-9-1彈性盒子

任務(wù)flex布局制作頁面任課教師：彈性盒子《Web前端基礎(chǔ)》課程任務(wù)展示2第一部分Knowledge彈性布局什么是彈性布局1Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。它即可以應(yīng)用于容器中，也可以應(yīng)用于行內(nèi)元素?？梢院啽?、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。基本概念2采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flexitem），簡稱"項(xiàng)目"。容器默認(rèn)存在兩根主軸：水平方向主軸(mainaxis)和垂直方向交叉軸(crossaxis)，默認(rèn)項(xiàng)目按主軸排列。mainstart/mainend：主軸開始位置/結(jié)束位置；crossstart/crossend：交叉軸開始位置/結(jié)束位置；mainsize/crosssize：單個(gè)項(xiàng)目占據(jù)主軸/交叉軸的空間；基本語法3任何一個(gè)容器都可以指定為Flex布局。語法如下：對父親元素設(shè)置：display:flex;對子元素設(shè)置：flex:份數(shù)；

實(shí)例常用容器屬性及屬性含義4（1）flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）基本語法格式row（默認(rèn)）：主軸水平方向，起點(diǎn)在左端；row-reverse：主軸水平方向，起點(diǎn)在右端；column：主軸垂直方向，起點(diǎn)在上邊沿；column-reserve：主軸垂直方向，起點(diǎn)在下邊沿。flex-direction:row|row-reverse|column|column-reverse;常用容器屬性及屬性含義4（2）flex-wrap:定義換行默認(rèn)的情況下，項(xiàng)目都排列在一條軸上，但有可能一條軸線排不下基本語法格式nowrap默認(rèn):不換行wrap：換行，第一行在上方

wrap-reverse:換行，第一行在下方。flex-wrap

:nowrap|wrap|wrap-reverse;常用容器屬性及屬性含義4（3）flex-flow屬性flex-flow屬性：flex-direction和flex-wrap的簡寫，默認(rèn)rownowrap基本語法格式flex-flow

:<flex-direction>|<flex-wrap>|常用容器屬性及屬性含義4（4）justify-content調(diào)整主軸對齊（水平對齊）基本語法格式flex-start默認(rèn)值。項(xiàng)目位于容器的開頭flex-end項(xiàng)目位于容器的結(jié)尾。center項(xiàng)目位于容器的中心。space-between項(xiàng)目位于各行之間留有空白的容器內(nèi)。space-around項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。justify-content

:flex-start|flex-end|center|space-between|space-around;網(wǎng)上教程：/qingchunshiguang/p/8011103.html常用容器屬性及屬性含義4（5）align-items屬性：定義在交叉軸上的對齊方式基本語法格式flex-start：起點(diǎn)對齊；flex-end：終點(diǎn)對齊；center：中點(diǎn)對齊；baseline：項(xiàng)目的第一行文字的基線對齊；stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。align-items:flex-start|flex-end|center|baseline|stretch;網(wǎng)上教程：/qingchunshiguang/p/8011103.html常用容器屬性及屬性含義4（6）align-content屬性：定義多根軸線上的對齊方式如果項(xiàng)目只有一根軸線，該屬性不起作用，所以，容器必須設(shè)置flex-wrap屬性，項(xiàng)目未設(shè)置高度時(shí)有意思的是，當(dāng)你不給項(xiàng)目設(shè)置高度但是給容器設(shè)置align-content不為stretch時(shí)，同一軸線上的項(xiàng)目高度將等于項(xiàng)目中高度最高的項(xiàng)目?；菊Z法格式flex-start：與交叉軸的起點(diǎn)對齊；flex-end：與交叉軸的終點(diǎn)對齊；center：與交叉軸的中點(diǎn)對齊；space-between：與交叉軸的兩端對齊，軸線之間的間隔平均分布；space-around：每根軸線兩側(cè)的間隔相等，即軸線之間的間隔比軸線與邊框間隔大一倍。Strech（默認(rèn)值）:align-content:flex-start|flex-end|space-between|