一、多列布局
1、columns属性定义多列布局
columns: column-width | | column-count;
columns属性初始值根据元素个别属性决定，它适用于不可替换的块元素、行内块元素、单元格，但是表单元素除外。
1）设置列宽
column-width: length | auto ;
2）设置列数
column-count: integer | auto ;
integer：定义栏目的列数，取值为大于0的整数，如果column-width没有明确值，那么这个值为最大列数。
auto：根据浏览器计算值自动设置
3）设置列间距
column-gap：normal | length;
normal：根据浏览器默认设置进行解析，一般为1em；
length：长度值，不能为负数。
4）设置列边框样式
column-rule：length | style | color | transparent;
length：长度值，不可为负值。功能与column-rule-width 属性相同
style：定义列边框样式。功能与column-rule-width 属性相同
color：定义列边框颜色。功能与column-rule-color属性相同
transparent：设置边框透明度
CSS3在column-rule中派生了以上三个属性。
5）设置跨列属性
column-span: none | all;
6）设置列高度
column-fill: auto | balance;
auto：各列的高度随其内容的变化而自动变化
balance：各列的高度会根据内容最多的那一列的高度进行统一
这是相对于内容所在容器具有高度的情况下设置的。
二、弹性盒布局
CSS3引入了新的盒模型（Box模型），该模型定义了一个盒子在其他盒子中的分布方式以及如何处理可用的空间。
display: box | inline-box | flexbox | inline-flexbox | flex | inline-flex
box：将对象作为弹性伸缩盒显示。伸缩盒为最老版本。
inline-box：将对象作为内联块级弹性伸缩盒显示。伸缩盒为最老版本。
flexbox：将对象作为弹性伸缩盒显示。伸缩盒为过渡版本。
inline-flexbox：将对象作为内联块级弹性伸缩盒。伸缩盒为过渡版本。
flex：将对象作为弹性伸缩盒显示。伸缩盒为最新版本。
inline-flex：将对象作为内联块级弹性伸缩盒显示。伸缩盒为最新版本。
1）定义
display: flex | inline-flex;
设置为 flex 的容器被渲染为一个块级元素
设置为 inline-flex 的容器被渲染为一个行内元素
伸缩项也遵循旧的盒子模型，具有content，padding，margin值
常规布局是基于块和文本流方向的，而Flex布局是基于flex-flow的。CSS的columns属性在伸缩容器上没有效果，同时float、clear和vertical-align属性在伸缩项目上也没有效果。（没有浮动，没有分栏显示，没有内联元素垂直对齐）
默认情况下，伸缩行与文本方向一致。
主轴（main axis）：伸缩项目主要是沿着这条轴进行排列布局。它不一定是水平的，主要取决于justify-content属性设置
主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度。伸缩项目的尺寸要么是宽度，要么是高度，由主轴方向决定。
侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
侧轴尺寸（cross size）：同主轴尺寸定义方式。
2）定义伸缩方向
flex-direction: row | row-reverse | column | column-reverse
适用于伸缩容器，用来定义主轴方向，从而定义伸缩项目的放置方向。
row：默认值，受ltr和rtl的排版方式影响
row-reverse：与row排列方向相反。
column：类似于row，不过是从上到下排列。
column-reverse：与column方向相反
3）定义行数
flex-wrap：nowrap | wrap | wrap-reverse
nowrap：默认值，伸缩容器单行显示。
wrap：伸缩容器多行显示。受writing-mode属性值的影响。
wrap-reverse：与wrap的显示方向相反
ps：flex-flow是 flex-direction 和 flex-wrap 属性的复合属性
4）定义对齐方式
① 主轴对齐
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：默认值，伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的终点位置靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：伸缩项目会均匀地分布在行里。（空格在伸缩项目之间）
space-around：伸缩项目会均匀地分布在行里，但会在两端留有空间。（空格环绕伸缩项目）
② 侧轴对齐
align-items：flex-start | flex-end | center | baseline | stretch
flex-start：伸缩项目在侧轴起点方向的外边距紧靠在侧轴起始的边
flex-end
center：伸缩项目的外边距盒在该行居中放置
baseline：伸缩项目根据它们的基线进行对齐
stretch：默认值，伸缩项目拉伸填充整个容器。受min-width/max-width的影响。
③ 伸缩行对齐
align-content: flex-start | flex-end | center | space-between | space-around | stretch适用于伸缩容器。
5）定义伸缩项目
伸缩容器中的文本也被视作一个伸缩项目。
伸缩项目都有一个主轴长度和一个侧轴长度，分别代表其在主轴上的尺寸和侧轴上的尺寸。
① order：<integer>适用于伸缩项目，可以控制他们在容器中出现的顺序。
② flex-grow：<number>适用于伸缩项目，定义伸缩项目的扩展能力。<number>主要依据剩余空间按比例应扩展多少空间。
默认值为0，负值同样生效。取值为此伸缩项目在容器中获得的剩余空间大小权值。
③ flex-shrink：<number>用来定义伸缩项目收缩的能力，该属性适用于伸缩项目。与flex-grow功能相反，默认值为1。
④ flex-basis：<length> | auto用来设置伸缩基准值，剩余的空间按比率进行伸缩，适用于伸缩项目。默认值为auto。
⑤ align-self：auto | flex-start | flex-end | center | baseline | stretch用来在单独的伸缩项目上覆写默认的对齐方式。属性值与align-items的属性值相同。
ps：margin：auto；在伸缩盒中具有强大的功能，一个“auto”的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—