任務3：“英博特智能科技”企業網站首頁頁面制作第二篇：項目實戰篇3.4公司優勢制作1-2任務2：頁面制作-人物介紹內容呈現（1）熟練運用彈性布局。（2）靈活運用CSS偽類。能力要求學習導覽任務概述完成首頁頁面中公司優勢模塊的制作。1-2任務2：頁面制作-人物介紹內容呈現該模塊包含左中右三個部分，風格一致，實現過程包括搭建模塊結構、三列布局設計以及圖文樣式的設計。任務思考1-2任務2：頁面制作-人物介紹內容呈現（1）瀏覽器對彈性布局的支持情況與兼容問題是怎樣的？

（2）彈性布局在水平方向上的對齊方式“space-around”和“space-between”有何差別？

（3）如何快速選擇某個元素的第2個子元素？

彈性布局1-2任務2：頁面制作-人物介紹內容呈現Flex是FlexibleBox的縮寫，意為“彈性布局”，是一種響應式布局，能自動伸縮盒模型達到自適應的效果。彈性盒子模型

（1）Flex容器通過display:flex屬性，可將元素聲明塊級彈性容器；通過dsplay:inline-fex，可將元素聲明為行內彈性容器。Flex容器包含6個屬性，分別為flex-direction、flex-wrap、flex-flow、justify-content、align-items以及align-content。1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

①flex-direction屬性flex-direction指定主軸(maincross)的方向，即元素排列的方向。flex-direction:row|row-reverse|column|column-reverserow:水平方向，從左往右row-reverse:水平方向，從右往左column:垂直方向，從上往下column-reverse:垂直方向，從下往上1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

②flex-wrap屬性flex-wrap屬性，指定彈性項目的換行方式，即彈性項目超過一行時如何換行。flex-wrap:no-wrap|wrap|wrap-reverseno-wrap:不換行(默認)wrap:正常換行

wrap-reverse:換行，第一行在下方，從下往上換行1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

③flex-flow屬性flex-flow屬性，為flex-direction和flex-wrap的合并屬性，其中第一個為flex-direction,第二個為flex-wrap。flex-fow:<flex-direction><flex-wrap>1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

④justify-content屬性justify-content屬性，指定彈性內容在主軸上的排列方式。justify-content:flex-start|flex-center|flex-end|space-between|space-aroundflex-start:從主軸起點(mainstart)到主軸終點(mainend)center:居中

flex-end:從主軸終點(mainend)到主軸起點(mainstart)space-between:均勻分布在行里，第一個元素邊界與行起始位置邊界對齊，最后一個元素邊界與行結束位置的邊界對齊

space-around:均勻分布在行里，兩端子元素與行邊界有間距1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

⑤align-items屬性align-items屬性，指定彈性項目在縱軸上的對齊方向。align-items:flex-start|center|flex-end|base-line|stretchflex-start:項目對齊縱軸的起點(crossstart)center:居中

flex-end:項目對齊縱軸的終點(crossend)baseline:基于基線對齊

stretch:拉伸(默認)，從起點(crossstart)到終點(croosend)1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

⑥align-content屬性align-content屬性，指定當主軸(mainaxis)隨項目換行時，多條主軸線如何對齊。align-content:flex-start|center|flex-end|space-between|space-around|stretchflex-start:從縱軸起點(crossstart)到終點(crossend)center:居中

flex-end:從縱軸終點(crossend)到縱軸起點(crossstart)space-between:元素均勻分布在列里，第一個元素邊界與列起始位置邊界對齊，最后一個元素邊界與列結束位置的邊界對齊

space-around:元素均勻分布在列里，兩端子元素與列邊界有間距

stretch:拉伸(默認)，拉伸項目以布滿縱軸長度1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

（2）Flex項目盡管彈性容器已經有設置彈性項目的各種布局行為，但總有個別彈性項目需要自定義布局方式。Flex項目包含6個屬性，分別為order、flex-grow、flex-shrink、flex-basis、flex以及align-self屬性。①order屬性，指定彈性項目的排列序號，數值越小越靠前。order:<integer>②flex-grow屬性，指定彈性項目在有空余空間的放大比例。默認為0：表示即使有剩余空間也不放大。flex-grow:<number>③flex-shrink屬性，指定彈性項目在空間不夠時的縮小比例。默認為1：表示空間不夠時項目將縮小。flex-shrink:<number>④flex-basis屬性，指定彈性項目的基本長度。flex-basis:<length>⑤flex屬性，為flex-grow、flex-shrink和flex-basis的合并屬性。flex:flex-grow,flex-shrink,flex-basis默認:0,1,autoauto:1,1,autonone:0,0,auto1-4任務4：圖文混排-人物介紹頁面布局彈性盒子模型

align-self屬性align-self屬性，指定彈性項目在縱軸上的對齊方式，將覆蓋掉彈性容器的align-items屬性。align-self:autoflex-start|center|flex-end|base-line|stretchauto:自動

flex-start:項目對齊縱軸的起點(crossstart)center:居中

flex-end:項目對齊縱軸的終點(crossend)baseline:基于基線對齊

stretch:拉伸(默認)，從起點(crossstart)到終點(croosend)1-4任務4：圖文混排-人物介紹頁面布局任務實施“公司優勢”模塊CSS樣式設計（三列布局）02.“公司優勢”模塊CSS樣式設計（圖像和文本樣式）03.01.“公司優勢”模塊HTML結構設計1-2任