多列布局以及flex布局
对于多列布局常用于报纸和杂志样式的排版，其默认属性主要有以下几个。column-count是将文本中的内容分成几部分，因此在其后面只需要写数字即；column-width设置文本中每一列文本的宽度 在通常的情况下，column-count 与column-width各选其中的某一个使用就行当两中分开写时，以column-width为准；column-gap此属性是用来设置间距的的宽度，这种情况下总的间距之间就不会比容器宽度减去文本内容宽度多1px，将主题等内容进行跨列处理，其参数只能为1或者all，设置其他的参数值是没有效果的；column-rule由column-rule-width column-rule-style column-rule-color 三个部分共同所决定，其不占任何空间位置 ，在列与列之间改变其宽度不会改变任何列的位置 常用的style有dashed(虚线) dotted(圆形) 等。
以上就是关于多列布局的常用设置，那么接下来就是讲解flex布局又称弹性盒子。弹性盒子常与css3动画结合使用，其在布局上也非常的方便。在布局上首先要有一个容器，另外需要项目。容器是包裹项目的标签。其结构如下：
在上面的代码中表现了flex布局的html结构，wrapper被称为容器，item被称为项目。在布局上需要注意的是，当你使用了flex布局之后，子元素的flaot,clear,和vertical-align属性将会失效。也就是在项目中这些效果会被取消掉不能被使用。
在使用flex时必须先去触发弹性盒子触发的语法是display:flex；将这个属性放在容器上就可以触发弹性盒子，那么可以写在容器上的属性有那些？写在项目上的属性又有那些呢？具体如下：
触发弹性盒子的方式是在容器中写上display: flex;
设置在项目中的属性有六个 flex-grow flex-shrink flex-basis flex order align-self
设置在容器上的属性有flex-direction flex-wrap flex-flow justify-content align-item align-content
flex-direction 决定主轴的方向 row(默认值)x轴 从右往左 row-reverse x轴从左往右 column y轴从上向下 column-reverse y轴从下往上
flex-wrap 一条轴线排不下实现换行 nowrap(默认) 不换行 wrap第一行在上方 wrap-reverse 第一行在下方
flex-flow : flex-direction && flex-wrap
justify-content 决定项目在主轴上的对齐方式 flex-start 以主轴的左边 flex-end以主轴的右边 center以主轴的中间 space-between 两端对齐，项目之间间隔相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items 设置所有项目的对齐方式与align-self参数值一样
align-content 多轴对齐方式
对于项目上的属性，参考下面给出的代码实例，上面有具体的设置在项目上的属性注释，也就是能达到的效果：
对于容器上的属性的含义可以去参考阮一峰的关于flex布局的教程及其含义，上面有图形结合加上解释的过程。具体的参考网址如下：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，flex布局是非常重要的，当其结合css3动画时，能实现一些比较好的效果展示，在学习完css3动画后也写过一个这样的案例，具体参照我之前写的博客，在哪里有具体的说明网址如下：https://blog.csdn.net/care_yourself/article/details/85237976