flex布局
容器的屬性
- 容器的屬性
1.flex-direction 決定item的排列方向
row 找爱、row-reverse梗顺、 column、 column-reverse
2.flex-wrap 排列不下時(shí)车摄，item如何換行
nowrap寺谤、wrap、wrap-reverse
3.flex-flow flex-direction和flex-wrap的簡(jiǎn)寫吮播，
row nowrap
4.justify-content item在主軸上的對(duì)齊方式
flex-start flex-end center space-between space-around
5.align-items item在交叉軸上的對(duì)其方式
flex-start flex-end center baseline(文字對(duì)齊) stretch(伸縮)
6.align-content 多根軸線的對(duì)其方式
flex-start flex-end center space-between space-around stretch - item的屬性
1.order 定義item的排列順序变屁，默認(rèn)為0，越小越靠前
2.flex-grow 當(dāng)有多余空間時(shí)意狠，item的放大比例粟关，默認(rèn)為0，即有多余空間也不放大
flex-grow:2 flex-grow:2 flex-grow:1
即把多余空間分成5分环戈，第一闷板、二個(gè)項(xiàng)目增加2份，第三個(gè)項(xiàng)目增加1份
3.flex-shrink 當(dāng)空間不足時(shí)院塞，item的縮小比例遮晚，默認(rèn)為1，即空間不足時(shí)所轄
flex-shrink:2 flex-shrink:2 flex-shrink:1
把需要縮放的空間分成5份拦止，例如：要縮放200px县遣，則第一個(gè)item要縮小80px,最后一個(gè)項(xiàng)目縮小40px
4.flex-basis 項(xiàng)目在主軸上占據(jù)的空間，長(zhǎng)度值汹族，默認(rèn)為auto
5.flex:grow shrink basis的縮寫萧求，默認(rèn)：0 1 auto
6.align-self 單個(gè)item的獨(dú)特對(duì)齊方式，同align-items顶瞒，可覆蓋align-items屬性
