一：css3多列布局
- column-count:3; 內(nèi)容有幾列
- column-gap:40px; 列于列之間的間隙
- column-rule-style:solid | double | dotted; 列與列間的邊框樣式
- column-rule-width:3px; 列邊框的寬度
- column-rule-color:pink; 列邊框的顏色
以上三種合寫：column-rule:3px solid pink; - column-span:all; 指定元素跨越多少列
- column-width:100px; 每一列的寬度砚嘴，不能與column-count一起使用唾琼，否則無效豌研。
-
columns:100px 3; column-width與colum-count的合寫。
1.png
2.png
二：css3 flex布局
*1. flex-direction: 決定主軸的方向(即項目的排列方向)。
.container {
display: flex | inline-flex; //可以有兩種取值
flex-direction: row | row-reverse | column | column-reverse;
}
默認值：row，主軸為水平方向，起點在左端秃嗜。
row-reverse：主軸為水平方向，起點在右端缸夹。
column：主軸為垂直方向痪寻，起點在上沿螺句。
column-reverse：主軸為垂直方向虽惭，起點在下沿。
*2. flex-wrap: 決定容器內(nèi)項目是否可換行蛇尚。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
默認值：nowrap 不換行芽唇，即當主軸尺寸固定時，當空間不足時，項目尺寸會隨之調(diào)整而并不會擠到下一行匆笤。
wrap：項目主軸總尺寸超出容器時換行研侣，第一行在上方。
wrap-reverse：換行炮捧，第一行在下方庶诡。
- flex-flow: flex-direction 和 flex-wrap 的簡寫形式。
.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
*4. justify-content：定義了項目在主軸的對齊方式咆课。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
主軸為水平方向時末誓，即 flex-direction: row。
默認值: flex-start：左對齊书蚪。
flex-end：右對齊
center：居中
space-between：兩端對齊喇澡，項目之間的間隔相等，即剩余空間等分成間隙殊校。
space-around：每個項目兩側(cè)的間隔相等晴玖，所以項目之間的間隔比項目與邊緣的間隔大一倍。
*5. align-items: 定義了項目在交叉軸上的對齊方式为流。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
默認值為 stretch 即如果項目未設(shè)置高度或者設(shè)為 auto呕屎，將占滿整個容器的高度。
flex-start：交叉軸的起點對齊敬察。
flex-end：交叉軸的終點對齊榨惰。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊静汤。
- align-content: 定義了多根軸線的對齊方式琅催，如果項目只有一根軸線，那么該屬性將不起作用虫给。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
當你 flex-wrap 設(shè)置為 nowrap 的時候藤抡，容器僅存在一根軸線，因為項目不會換行抹估，就不會產(chǎn)生多條軸線缠黍。
當你 flex-wrap 設(shè)置為 wrap 的時候，容器可能會出現(xiàn)多條軸線药蜻，這時候你就需要去設(shè)置多條軸線之間的對齊方式了瓷式。
Flex 項目屬性：
有六種屬性可運用在 item 項目上：
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
- order: 定義項目在容器中的排列順序，數(shù)值越小语泽，排列越靠前贸典，默認值為 0
- flex-basis: 定義了在分配多余空間之前，項目占據(jù)的主軸空間踱卵，瀏覽器根據(jù)這個屬性廊驼，計算主軸是否有多余空間
默認值：auto据过，即項目本來的大小, 這時候 item 的寬高取決于 width 或 height 的值。
當主軸為水平方向的時候妒挎，當設(shè)置了 flex-basis绳锅，項目的寬度設(shè)置值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發(fā)揮效果酝掩。
當 flex-basis 值為 0 % 時鳞芙，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px期虾，也并沒有什么用积蜻。
當 flex-basis 值為 auto 時，則跟根據(jù)尺寸的設(shè)定值(假如為 100px)彻消，則這 100px 不會納入剩余空間竿拆。
- flex-grow: 定義項目的放大比例
