《web 前端》10.5CSS3彈性盒子

教育.信息化教學(xué)課程web前端CSS3彈性盒子05PART10.5CSS３彈性盒子display 指定HTML元素盒子類型。flex-direction 指定了彈性容器中子元素的排列方式j(luò)ustify-content 設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。align-items 設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。flex-wrap 設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行。align-content 修改flex-wrap屬性的行為，類似align-items,但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊flex-flow flex-direction和flex-wrap的簡(jiǎn)寫(xiě)order 設(shè)置彈性盒子的子元素排列順序。align-self 在彈性子元素上使用。覆蓋容器的align-items屬性。flex 設(shè)置彈性盒子的子元素如何分配空間。CSS３彈性盒子彈性盒子由彈性容器(Flexcontainer)和彈性子元素(Flexitem)組成。彈性容器通過(guò)設(shè)置display屬性的值為flex或inline-flex將其定義為彈性容器。彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。注意：彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。以下元素展示了彈性子元素在一行內(nèi)顯示，從左到右:CSS３彈性盒子.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}CSS３彈性盒子如果我們?cè)O(shè)置direction屬性為rtl(right-to-left),彈性子元素的排列方式也會(huì)改變，頁(yè)面布局也跟著改變:body{direction:rtl;}.flex-container{display:-webkit-flex;display:flex;width:400px;height:250px;background-color:lightgrey;}.flex-item{background-color:cornflowerblue;width:100px;height:100px;margin:10px;}CSS３彈性盒子flex-direction順序指定了彈性子元素在父容器中的位置。flex-direction:row|row-reverse|column|column-reverseflex-direction的值有:row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。column：縱向排列。column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。CSS３彈性盒子以下實(shí)例演示了column的使用:.flex-container{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:400px;height:250px;background-color:lightgrey;}CSS３彈性盒子以下實(shí)例演示了column-reverse的使用:.flex-container{display:-webkit-flex;display:flex;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;width:400px;height:250px;background-color:lightgrey;}CSS３彈性盒子justify-content屬性內(nèi)容對(duì)齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（mainaxis）對(duì)齊。justify-content語(yǔ)法如下：justify-content:flex-start|flex-end|center|space-between|space-aroundCSS３彈性盒子各個(gè)值解析:flex-start：彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(rèn)值。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。flex-end：彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項(xiàng)依次平齊擺放。center：彈性項(xiàng)目居中緊挨著填充。（如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出）。space-between：彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于flex-start。否則，第1個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等。space-around：彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。CSS３彈性盒子CSS３彈性盒子align-items屬性align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。語(yǔ)法align-items:flex-start|flex-end|center|baseline|stretch各個(gè)值解析:flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。baselin