flex簡介
當(dāng)我們需要多行多列自適應(yīng)蕉拢，任意行對齊時眯牧。便可用flex布局實(shí)現(xiàn)。
Flex是Flexible Box的縮寫外恕，意為"彈性布局"杆逗，用來為盒模型提供最大的靈活性。任何一個容器都可以指定為Flex布局鳞疲。使用方法：.box{display:flex}
如果一個容器被設(shè)置為flex罪郊，稱為flex容器（flex container）
那么該容器的在文檔流中的子元素為flex item。
本文從以下三個方面來介紹：
- 方向
- 彈性
- 對齊
flex-方向
與flex方向有關(guān)的屬性為：
- flex-direction(彈性的方向)
- flex-wrap（彈性的換行）
- flex-flow
- order（順序）
flex-direction
flex-direction:row|row-reverse|column-reverse
flex-wrap
flex-wrap:nowrap|wrap|wrap-reverse 默認(rèn)不換行
flex-flow
flex-flow:<'flex-direction'>||<'flex-wrap'>
order
order:<interger> 初始值－ initial:0
按order值的大小在主軸上排列尚洽，值越大越往后排
flex-彈性
- flex-grow
- flex-shrink
- flex-basis
flex-basis
flex-basis:main-size|<width>
設(shè)置flex item的初始寬/高
flex-grow
flex-grow:<number>
初始值－initial:0
設(shè)置的是元素所能分配到的剩余空間的比例悔橄。
具體值是： flex-basis+flew-grow/sum(flew-grow)*remain
首先瀏覽器會在沒有flew-grow的設(shè)置下做布局，那么剩余空間就是remain腺毫，然后再來看是否有元素設(shè)置 flew-grow ,如果有癣疟，這個元素她的寬度就等于他的flex－basis再加上 flow-grow/sum(flow-grow)*remain
例子：
如何設(shè)置其中一個div為flex-grow:1時
如何再設(shè)置其中一個div為flex-grow:2時
flex-shrink
flex-shrink:<number>
默認(rèn)為－initial:1
具體值是：flex-basis+flew-shrik/sum(flex-shrink)*remain 此時remain為負(fù)數(shù)
flex
flex:<flex-grow'>||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size
對齊
- justify-content
- align-items
- align-self
- align-content
justify-content
設(shè)置main-axis 方向上的對齊方式
justify-content:flex-start|flex-end|center|space-between|space-around initial：flex-start
flex-start（默認(rèn)值）： 主軸起始方向?qū)R
flex-end：主軸結(jié)束方向?qū)R
center： 居中。
space-between：兩端對齊拴曲，項(xiàng)目之間的間隔都相等争舞。
space-around：每個項(xiàng)目兩側(cè)的間隔相等凛忿。所以澈灼，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-items
justify-content:flex-start|flex-end|center|baseline|stretch initial：stretch
設(shè)置cross-axis方向上的對齊方式
align-self
align-self:auto|flex-start|flex-end|center|baseline|stretch
設(shè)置單個flex item 在cross－axis方向上的對齊方式
align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式店溢，可覆蓋align-items屬性叁熔。默認(rèn)值為auto，表示繼承父元素的align-items屬性床牧，如果沒有父元素荣回，則等同于stretch
align-content
align-content:flex-start|flex-end|center|space-between|space-around|stretch initial：stretch
設(shè)置cross-axis方向上行對齊方式
