css3中的flex
flex的學習筆記如下。
接觸這個flex屬性是要解決一個元素水平垂直居中的問題,使用flex輕鬆解決。程式碼如下:
<div class='container'>
<div class='item'>
item
</div>
</div>
.container {
width: 200px;
height: 200px;
background: #eee;
display:flex;
}
.item {
width:50px;
height:50px;
background:#fff;
margin:auto;
}
前一篇盒子模型中有提到,盒子模型中的margin會垂直重疊的問題,使用display:flex就解決了。
另外使用display:flex後,元素設定的float屬性都將變為none;直接子元素的display將被修改為block。
採用flex佈局的元素稱為flex容器,簡稱‘’容器‘’。它的所有子元素自動成為容器成員,稱為flex專案,簡稱“專案”。
容器預設存在兩個軸:主軸和交叉軸。
容器的屬性值有:
flex-direction(控制主軸方向):row|row-reverse|column|column-reverse
flex-wrap(控制專案換行):wrap|wrap-reverse|預設不換行no-wrap
flex-flow(以上兩種屬性的簡寫)
justify-content:flex-start|flex-end|center|space-around|space-between
align-items:flex-start|flex-end|center|baseline|stretch
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
專案的屬性值有:
order:屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
flex-grow:屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。
flex-shrink:屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
flex-basis:屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。
flex:flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self :允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}