本文共 3614 字,大约阅读时间需要 12 分钟。
//常规写法 .cover-common{ position: relative; } .cover-common .item{ position: absolute; left: 50%; top: 50%; margin-left:-50px; margin-top: -50px } //flex写法 .cover-flex{ display: flex; justify-content: center; align-items: center }
1、flex-direction:设置容器主轴线的方向 2、flex-wrap:设置是否换行,每换一行意味着会多一条主轴线 3、justify-content:设置主轴方向上的项目的对齐方式 4、align-items:设置交叉轴方向上项目的对齐方式 5、align-content:多轴线对齐方式
.box { flex-direction: row; //(默认值)主轴为水平方向,起点在左侧 flex-direction: row-reverse ;//主轴为水平方向,起点在右侧 flex-direction: column;//主轴为垂直方向,起点在顶部 flex-direction: column-reverse;//主轴为垂直方向,起点在底部 }
.box{ flex-wrap: nowrap; //(默认值)设置不换行,就挤着 flex-wrap: wrap;//换行,按顺序第一行从交叉轴线起点端开始排列 flex-wrap: wrap-reverse;换行,但是被后来居上了,第一行从交叉轴线结束端开始排列 }
.box { flex-flow:|| ; }
.box { justify-content: flex-start;//(默认值)主轴线起点对齐 justify-content: flex-end ;//主轴线终点对齐 justify-content: center ;//主轴线中心对齐 justify-content: space-between; //主轴线两端对齐,项目间距相等 justify-content: space-around;//项目两侧间距相等,所以项目间距是两端间距2倍 justify-content: space-evenly //项目间距相等,与两端间距也相等 }
.box { align-items: flex-start ;//交叉轴的起点对齐 align-items: flex-end ;//交叉轴的终点对齐。 align-items: center ;//交叉轴居中对齐。 align-items: baseline ;//项目的第一行文字的基线对齐。 align-items: stretch;//如果项目未设置高度或设为auto,将占满整个容器的高度。 }
.box { align-content: flex-start ;//与交叉轴的起点对齐。 align-content: flex-end ;//与交叉轴的终点对齐 align-content: center ;//与交叉轴中心对齐 align-content: space-between ;//与交叉轴两端对齐 align-content: space-around ;//每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 align-content: stretch;(默认值)轴线占满整个交叉轴 }
1、order:定义项目在容器中的排列顺序 2、flex-grow:定义项目的放大比例 3、flex-shrink:定义了项目的缩小比例 4、flex-basis:定义了在分配多余空间之前,项目占据的主轴空间 5、align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
.item { order:number; //default 0 }
.item { flex-grow: number; // default 0 }
.item { flex-shrink: number; // default 1 }
.item { flex-basis: length | auto; // default auto }
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
转载地址:http://vufpi.baihongyu.com/