flex布局的基本概念

1、課時內(nèi)容flex布局的基本概念課時4教學(xué)目標(biāo)掌握flex布局的基本概念；掌握坐標(biāo)軸的設(shè)置；掌握flex屬性的使用。教學(xué)重難點掌握flex模型；掌握flex屬性的使用。教學(xué)設(shè)計1.教學(xué)思路：介紹flex模型的基本概念、flex布局的坐標(biāo)系以及flex屬性等知識內(nèi)容；通過多媒體演示和實機(jī)操作講解微信小程序中flex模型的基本概念、flex布局的坐標(biāo)系以及flex屬性的使用；通過小程序?qū)崙?zhàn)鞏固基礎(chǔ)知識。2.教學(xué)手段：多媒體+計算機(jī)3.教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容一、任務(wù)描述本任務(wù)主要介紹flex布局。小程序使用flex模型可以提高頁面布局的效率。flex布局是一種靈活的布局模型，當(dāng)頁面需要適應(yīng)

2、不同屏幕尺寸及設(shè)備類型時，flex布局可以確保元素在恰當(dāng)?shù)奈恢?。本?jié)的學(xué)習(xí)目標(biāo)：（1）掌握flex布局的基本概念；（2）掌握坐標(biāo)軸的設(shè)置；（3）掌握flex屬性的使用。以下分別介紹flex模型的基本概念、flex布局的坐標(biāo)系以及flex屬性等知識內(nèi)容。二、導(dǎo)入新知1. flex模型的基本概念flex模型的基本概念是容器和軸，容器包括外層的父容器和內(nèi)層的子容器（又稱為項目，flex item），軸包括主軸和交叉軸。在將父容器設(shè)置為flex模型后，它的所有子元素會自動成為子容器成員，即子容器。如圖所示：容器默認(rèn)存在兩條軸，水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸

3、的開始位置（與邊框的交叉點）稱為main start，結(jié)束位置稱為main end；交叉軸的開始位置稱為cross start，結(jié)束位置稱為cross end。子容器（項目）默認(rèn)沿主軸排列，單個項目占據(jù)的主軸空間稱為main size，占據(jù)的交叉軸空間稱為cross size。在flex布局中，用于包含內(nèi)容的組件稱為容器（container），容器內(nèi)部的組件稱為項目（flex item）。容器允許嵌套。實力代碼如下：2. 坐標(biāo)軸flex布局的坐標(biāo)系以容器左上角的點為原點，自原點往右、往下形成兩條坐標(biāo)軸。在默認(rèn)情況下是水平布局，即水平方向從左往右為主軸（main axis），垂直方向從上往下為交

4、叉軸（cross axis），如圖（a）所示。用戶也可以使用樣式屬性 flex-direction:column 將主軸與交叉軸的位置互換，如圖（b）所示3. flex屬性在小程序中，根據(jù)標(biāo)簽類型，可以將flex布局的相關(guān)屬性分為容器屬性和項目屬性。flex布局主要涉及12個屬性（不含display:flex），其中容器屬性和項目屬性各6個，但是常用的只有4個，容器屬性和項目屬性各2個。flex布局中的容器屬性如表所示。屬 性說 明默 認(rèn) 值flex-direction設(shè)置項目的排列方向rowflex-wrap設(shè)置項目是否換行nowrapflex-flowflex-direction和flex

5、-wrap的綜合簡寫方式row nowrapjustify-content設(shè)置項目在主軸方向上的對齊方式，以及分配項目之間及其周圍多余的空間flex-startalign-items設(shè)置項目在行中的對齊方式stretchalign-content當(dāng)多行排列時，設(shè)置行在交叉軸方向上的對齊方式，以及分配項目之間及其周圍多余的空間stretchflex布局中的項目屬性主要用于設(shè)置容器內(nèi)部項目的尺寸、位置及對齊方式，如表所示。屬 性說 明默 認(rèn) 值order設(shè)置項目在主軸方向上的排列順序0flex-shrink收縮在主軸方向上溢出的項目1flex-grow擴(kuò)張在主軸方向上還有空間的項目0flex-basis 代替項目的寬度或高度屬性autoflexflex-shrink、flex-grow和flex-basis的綜合簡寫方式