微信小程式---彈性盒子模型
阿新 • • 發佈：2019-01-05
1.彈性盒子佈局
彈性盒子是 CSS3 的一種新的佈局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
flex-direction
flex-direction 順序指定了彈性子元素在父容器中的位置。
語法
flex-direction: row| row-reverse | column | column-reverse
flex-direction的值有:
- row：橫向從左到右排列（左對齊），預設的排列方式。
- row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
- column：縱向排列。
- column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start |flex-end| center | space-between | space-around
align-items 屬性
align-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end| center | baseline | stretch
flex-wrap 屬性
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:
- nowrap - 預設，彈性容器為單行。該情況下彈性子項可能會溢位容器。
- wrap - 彈性容器為多行。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列。
完美的居中
設定 margin: auto; 可以使得彈性子元素在兩上軸方向上完全居中
flex
flex 屬性用於指定彈性子元素如何分配空間。
語法
flex:auto| initial | none | inherit |[ flex-grow ]||[ flex-shrink ]||[ flex-basis ]
例項
.flex-item {background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
代表 item1佔據了彈性盒子的2/4大小，item2,3佔據了1/4
注意：
在彈性盒子模型中，固定了一個子元素的寬高，使另一個子元素的flex：1，css3將會自動分配兩者的佈局