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 拉长对齐