css3 flex 详解,可以实现div内容水平垂直居中

css3 flex 详解,可以实现div内容水平垂直居中

flex一系列属性：

1、flex-direction: （元素排列方向）

flex-direction:row /*（横向从左到右排列==左对齐）*/

flex-direction:row-reverse  /*（与row 相反）*/

flex-direction:column /*（从上往下排列==顶对齐）*/

flex-direction:column-reverse /*（与column 相反）*/

2、flex-wrap: （内容一行容不下的时候才有效）

flex-wrap:nowrap /*（超出不换行，很奇怪里面的宽度会变成100%）*/

flex-wrap:wrap /*（超出按父级的高度平分）*/

flex-wrap:wrap-reverse    /*（与wrap 相反）*/

3、justify-content: （水平对齐方式）

justify-content:flex-start /*（水平左对齐）*/

justify-content:flex-end; /*（水平右对齐）*/

 justify-content:center; /*（水平居中对齐）*/

justify-content:space-between; /*（两端对齐）*/

justify-content:space-around; /*（两端间距对其）*/

4、align-items: （垂直对齐方式）

align-items:stretch; /*（默认）*/

align-items:flex-start; /*（上对齐，和默认差不多）*/

align-items:flex-end; /*（下对齐）*/

align-items:center;/*（居中对齐）*/

align-items:baseline; （基线对齐）

还没搞明白基线对齐是什么意思。