多列布局、弹性盒子布局

多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局

1创建多列

div {   

   column-count: 3;

}

2创建列与列间的间隙

div {   

  -moz-column-gap: 40px; /* Firefox */   

 column-gap: 40px;

}

3列边框

column-rule 属性指定了列与列间的边框样式：

div {       -moz-column-rule-style: solid; /* Firefox */   

 column-rule-style: solid;

}

综合设置

div {column-rule:2px solid red;

/*-ms-column-rule:2px dashed blue;*/

}

column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写 列之间的边框
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度，尽量不要与column-count同时使用
columns	设置 column-width 和 column-count 的简写

flex弹性盒子布局

flex布局是一种新的布局方案，通过修改父div的display属性让父元素成为一个flex容器，从而自由操作容器中子元素的排列方式。display：flex；

flex布局主要有容器属性和项目属性

容器属性：

1、flex-direction控制主轴是横向排列还是垂直排列

默认row横向排列从左到右。row-reverse从右到左

column纵向排列从上到下。column-reverse从下到上

div{

flex-direction：column}

2、flex-wrap调整项目是否换行

默认nowrap不换行。 自身宽度如果位置不够，会等分容器的宽度

wrap换行。 自身宽度如果位置不够，会换下一行继续，不会等分容器的宽度

wrap-reverse换行。 从底部开始，位置不够会换下一行（相当于是往上换下一行）

div{

flex-wrap：wrap}

3、justify-content调整项目主轴的对齐方式

默认flex-start左对齐。

flex-end右对齐。

center居中。 项目之间不留间隙

space-between第一个在左边，最后一个在右边，中间项目之间空隙相等

space-around(空白环绕，两边空白是中间空白的一半）

space-evenly /ˈiːvnli/均匀(两边空白和中间空白相等）

div{

justify：space-between；}

4、align-items调整侧轴排列方式

默认flex-start。项目在纵轴紧贴容器顶部 /横轴紧贴容器左边

flex-end。项目在 纵轴紧贴容器底部 /横轴紧贴容器右边

center。在 纵轴/横轴 中间排列

div{

align-itmes：center}

5、align-content调整折行后的行间距

在flex-wrap:wrap 或 flex-wrap:wrap-reverse有效

元素拥有自身的高度 , 折行之后 , 会有一个比较大的行间距 , 调整行间距

默认flex-start上对齐。

flex-end下对齐。

center居中。 项目之间不留间隙

space-between第一个在上边，最后一个在下边，中间项目之间空隙相等

space-around(空白环绕，上下边空白是中间的一半）

space-evenly /ˈiːvnli/均匀(上下边空白和中间空白相等）

6、flex-flow是复合属性flex-wrap和flex-direction

元素属性给子元素用

1、控制单独元素align-self

2、不改变结构调整元素的顺序(越大越往后）

复合属性给子元素使用

使用flex

step1：计算剩余空间，剩余空间为弹性盒子剩余宽度与进行flex的子元素的宽度之和。

例中的剩余空间为：

剩余宽度为400px ，进行flex的子元素宽度分别是100,100，所以剩余空间为600px。

step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为200px,400px。

使用flex-grow（扩张因子）

step1：计算剩余空间，剩余空间为弹性盒子剩余宽度

例中的剩余空间为：

剩余宽度为400px

step2: 按照进行flex属性值，数字的比例进行分配空间。黄色和蓝色的比例为1:2。因此其宽度分别为133.34px ,266.66px。

step3：元素自身的宽度加上分配到的剩余空间就是放大后的宽度。因此其最终显示出来宽度分别为233.34px ,366.66px。

flex-shrink(收缩因子)

0不会收缩，1会收缩

flex-basis(子元素占父元素的比例）