Flex

display:flex

flex-direction属性   设置 <div> 元素内弹性盒元素的方向为相反的顺序：    

定义主轴的排列方向

flex-direction：row横向排列（默认值）从左到右

flex-direction：row-reverse从右到左

flex-direction：column纵排列 从上到下

flex-direction：column-reverse 从下到上

例子

display:flex;
flex-direction: column-reverse;

 

flex-wrap属性   让弹性盒元素在必要的时候拆行：

flex-wrap：nowrap（默认值）不换行

flex-wrap：wrap  换行

flex-wrap：wrap-reverse  换行倒序   最下一行去到最上面

例子

display:flex;
flex-wrap: wrap-reverse;

 

flex-flow属性 是flex-wrap flex-direction的组合

例子

display:flex;
flex-flow: row-reverse wrap;

 

justify-content属性 　　　　 在弹性盒对象的 <div> 元素中的各项周围留有空白：   

justify-content：center 水平居中

justify-content：flex-start （默认值)主轴起点

justify-content：flex-end 　主轴终点

justify-content: space-around; 每个内容两边的剩余空间平均分配  /*伸缩项目两边碰 中间空间平均分*/

justify-content: space-between; 两边的内容靠边，剩余空间平均分配　　/*伸缩项目平均分 剩余空间两边碰*/

 

align-content属性交叉轴的排列方式   对齐弹性盒的 <div> 元素的各项：

align-content:flex-start

align-content:flex-end

align-content:center

align-content:stretch

align-content:space-between

align-content:space-around

例子

display:flex;
flex-wrap: wrap;//必须在换行的情况下
align-content: center;

 

align-items 子元素在交叉轴上的对齐模式  

align-items：flex-start

align-items :flex-end

align-items:center  垂直居中

align-items:baseline  基线对齐

align-items:stretch 拉长对齐

转载于:https://www.cnblogs.com/jian1234/p/9884504.html