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

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

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

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

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

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