从零开始学习前端开发 — 12、CSS3弹性布局
一、分栏布局
1.设置栏数column-count:数值;
2.设置每栏的宽度column-width:数值+单位;
注：当设置了column-width，column-count会失效，二者设置其一即可
3.设置栏间距column-gap:数值+单位;
4.设置栏间隔线column-rule:5px solid|dashed|dotted black;
5.设置是否跨栏显示column-span:all(跨栏)|none(不跨栏);
注：a）给需要跨栏显示的元素设置该属性
b) 该属性只有chrome浏览器支持
二、弹性布局
说明：
(1) 当给元素设置了display:flex;后，该元素就成为了弹性盒
(2) 当父元素设置了display:flex;后，子元素的float,clear,vertical-align将会失效
(3) 我们将设置display:flex;属性的父元素称为flex容器，里面所有的子元素称为容器成员或flex项目
(4) 当设置了display:flex;后会随之产生两根轴线：主轴和交叉轴
Flex容器属性
1.设置主轴方向语法： flex-direction:row|row-reverse|column|column-reverse;
row 默认值，主轴在水平方向，起点在左端
row-reverse 主轴在水平方向，起点在右端
column 主轴在垂直方向，起点在上沿
column-reverse 主轴在垂直方向，起点在下沿
2.设置flex容器是单行显示还是多行显示语法： flex-wrap:nowrap|wrap|wrap-reverse;
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行，但行的顺序会倒过来
注：该属性主要针对主轴在水平方向上的时候
3.flex-flow是flex-direction和flex-wrap的简写方式默认值为：flex-flow:row nowrap;
4.设置主轴的对齐方式语法： justify-content:flex-start | flex-end | center | space-between | space-around;
a)flex-start 默认值，类似于左浮动
b)flex-end 类似于右浮动
c)center 居中对齐
d)space-between flex项目两端对齐，中间间隔相等
e)space-around flex项目两侧的间隔相等
5.设置交叉轴对齐方式： align-items:flex-start|flex-end|center|baseline|stretch;
a) flex-start 对齐交叉轴的起点
b) flex-end 对齐交叉轴的终点
c) center 沿交叉轴方向居中对齐
d) baseline 沿flex项目第一行文字基线对齐
e) stretch 当flex项目没有设置高度或为auto时，将占满整个父元素的高度
注：使用弹性盒如何实现不定宽高元素在父元素中水平垂直都居中
方法如下：
父元素{
display:flex;
justify-content:center;
align-items:center;
}
如何使元素在屏幕窗口水平垂直都居中，设置如下：
html,body{height:100%;}
body{
display:flex;
justify-content:center;
align-items:center;
}
6.设置多根轴线的对齐方式： align-content:flex-start|flex-end|center|space-between|space-around|stretch;
a) flex-start 对齐交叉轴的起点
b) flex-end 对齐交叉轴的终点
c) center 以交叉轴为参考，居中对齐
d) space-between 多根轴线两端对齐，轴线之间间隔相等
e) space-around 轴线两侧的间隔相等
f) stretch 如果flex项目没有设置高度或为auto,将会均分父元素的高度
注： 当只有一根轴线时，此属性不起作用
Flex项目属性
1.设置flex项目的排列顺序： order:数值; (值越小越靠前)
2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式(重写父元素的align-items属性): align-self:flex-start|flex-end|center|baseline|stretch;
3.设置flex项目的放大比例： flex-grow:0 | 数值;
注：当父元素存在剩余空间时，默认值为0，不放大
4.设置flex项目的缩小比例： flex-shrink:1|数值;
注：当父元素空间不足时，默认flex项目等比例缩小，flex-shrink默认值为1
flex-shrink:0; 即使父元素空间不足，flex项目也不缩小
5.设置flex项目占据主轴的空间：flex-basis:数值+单位;
注：类似于给元素设置宽高;
6.flex属性是flex-grow，flex-shrink，flex-basis的简写方式默认值： flex:0 1 auto;
flex:1;的两个应用
a) 等比例分配空间
b) 分配剩余空间
