css3整理（三）

css3弹性盒子

display：flex

flex-direction (主轴排列方向) :

flex-direction : 主轴排列方向(即项目的排列方向)
row(主轴为水平方向，起点在左端,宽度内容撑开， 高度自适应)

row-reverse(主轴为水平方向，起点在右端，宽度内容撑开， 高度自适应)

column(主轴为垂直方向，起点在上沿，高度内容撑开，宽度自适应)

column-reverse(主轴为垂直方向，起点在下沿，高度内容撑开，宽度自适应)

justify-content : 主轴对齐

flex-start : 起始位置

flex-end : 结束位置

center : 居中位置

space-between : 富余空间作为元素之间的间隔

space-around : 富余空间作为元素之间的间隔(端点也算富余空间了)

align-items : 侧轴对齐 (和主轴垂直的轴)

flex-start  (默认) (看着没什么区别，但是这是表示作为侧轴的水平方向对齐起始位置=。=)

flex-end

center

flex-wrap : 换行

nowrap (默认不换行 )

wrap  :  换行操作　 (行间距是把页面切成容放的行数然后每行减去元素的高度得到)
  

align-content ： 行之间对齐

flex-start

flex-end

center

space-between

space-around

默认 : 起点位置，行之间有空隙(父容器高度平均分配位置)
align-self : 子元素的位置设置

flex-start :每一行都是靠上对齐，以这一行的最高的为基准

center  ：每一行都是居中对齐，以这一行的最高的为基准

  flex-end：每一行都是靠下对齐，以这一行的最高的为基准

 

flex : 1 表示flex中权的大小

none    flex：1   noe

flex  1   1   1

flex  1   2   1

 

补：display:flex与display:box区别

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。 后者是2009年的语法，已经过时，是需要加上对应前缀的。

 

 box-sizing :

border-box (内缩盒子)  有一点好处：确保两个div元素的并列显示

padding-box（正常盒子）

content-box（外扩盒子）默认