彈性可伸展的.讓一個容器變成一個可以自由伸展(彈性)的
移動端使用較多(不用考慮IE)
1 起源
2009年.W3C提出了一種新的方案----Flex布局(現(xiàn)在的瀏覽器支持性更好,導致了現(xiàn)在才開始流行)
2 作用
※※舉例說明↓
完美的居中
<body>
<div class="container">
<div class="item">
item
</div>
</div>
<style type="text/css">
.container{
width:200px;
height:200px;
background:#eee;
border:1px solid red;
display:flex;
}
.item{
width:50px;
height:50px;
background-color:#fff;
margin:auto;
}
</style>
</body>
chrome下的輸出結(jié)果:
- 缺點:父級元素(容器)加上了display:flex后 第一子級元素(項目)都會變成塊元素(嵌套的子級元素不會受影響)
- 優(yōu)點
1)解決了margin重疊的問題
2)干掉的float
3 基本概念
3.1 容器&項目
容器：如果你給一個元素添加 display:flex贪磺，就稱為這是一個容器莱革。
功能 : 設置主軸的方向(項目的排列方向)
1)容器中項目會按照主軸方向進行擺放,默認的主軸方向是水平方向
2)容器的屬性值-
flex-direction(4個值)
flex-direction.png -
flex-wrap(3個值)
flex-wrap.png -
flex-flow
flex-flow.png -
justify-content(5個值)
justify-content.png -
align-items(5個值)
align-items.png -
align -content(6個值)
align-content.png 項目：容器里面的直接子元素(子級第一個元素)谷羞，稱為項目
1)所有項目都是block(子級元素下嵌套的元素除外)
2)項目的屬性值-
order:用于更改排列順序各谚。數(shù)值越小，排列越靠前闲询，默認為0.可以為負數(shù)竿拆。
order.png -
flex-grow
flex-grow.png -
flex-shrink
flex-shrink.png -
flex-basis
flex-basis.png -
flex
flex.png -
align-self
align-self.png -
display:flex
display-flex.png -
justify-content(子元素主軸的對齊方式)
子元素主軸對齊方式.png -
align-items(子元素交叉軸對齊方式)
子元素交叉軸對齊方式.png
3.2 主軸$交叉軸
