flex弹性布局和多栏布局

flex弹性布局

在未来flex布局将成为布局的首选方案 Flex是flexinle Box的缩写，意思是弹性布局；用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。即：display：flex；

Css3中box-sizing：属性让两种盒模型相互转变box-sizing ： content-box || border-box || inherit;
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为容器项目

 

flex布局

 

1.dispiay：flex;//设置为弹性盒子
2.flex-direction()主轴的方向
row默认一行/row-revers:反转/column:纵向排列/column-reverse:反转。
3.justify-content(主轴对齐方式):flex-start(默认，左对齐)/flex-end(右对齐)/center(居中)/space-between(两端对齐，中间自动分配)/space-around(自动分配)
4.align-items(侧轴对齐):flex-start(顶端对齐)/flex-end(低对齐)/center(垂直居中对齐)/baseline（项目内文本的底线对齐）/stretch(默认值，项目的高度自适应容器)
5.flex-wrap:nowrap(单行，该情况下flex子项可能会溢出容器)/wrap(溢出换行，子项内部会发生断行)/wrap-reverse(反转wrap排列)
6.align-content（行与行之间的对齐方式）:flex-start(没有行间距)/flex-end(地对齐没有行间距)/center(居中没有行间距)/space-between(两端对齐，中间自动分配)/space-around(自动分配距离)
7.align-self(规定容器内被选中项目的对齐方式)：strectch(元素被拉伸以适应容器)/center(元素位于容器的开头)/flex-start(位于容器开头)/flex-end（元素位于容器的结尾）
8.order（数字越大越往后排，默认为0，支持负数）
9.flex-grow（属性放大，默认值为0）flex-shrink:(属性缩小，默认为1，空间不足，该项目缩小。)flex-basis（默认值auto，可设置跟width属性一样的值，）三个值简写flex：0 1 auto；

多栏布局

1.column-count：数字（栏数）2.column-width:具体数值
3、column-gap：间距 4.column-rule：宽度，颜色，线型
5.column-span：all/none(跨栏)