1、flex-direction: （元素排序方位）
※ flex-direction:row （横向从左到右排序==左对齐）
※ flex-direction:row-reverse （与row 相反）
※ flex-direction:column （从上往下排序==顶对齐）
※ flex-direction:column-reverse （与column 相反）
2、flex-wrap: （內容1行容不下的情况下才合理）
※flex-wrap:nowrap （超过不换行，很怪异里边的宽度会变为100%）
※ flex-wrap:wrap （超过按父级的高宽比均分）
※flex-wrap:wrap-reverse（与wrap 相反）
3、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; （基准线对齐）
如延展性盒子元素的行内轴与侧轴（纵轴）为同1条，则该值与'flex-start'等效。其它状况下，该值将参加基准线对齐。
flex器皿特性
/*1.方位*/
/*默认设置方位（row正方位）*/
/* flex-direction: row; */
/*row反向*/
/* flex-direction: row-reverse; */
/*columnz正方位*/
/*flex-direction: column;*/
/*columnz反向*/
/*flex-direction: column-reverse;*/
/*2.换行*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
/*3.direction+wrep组成*/
/*flex-flow: row wrap-reverse;*/
/*4.主轴对齐*/
/*起始点左对齐*/
/*justify-content: flex-start;*/
/*起始点右对齐*/
/*justify-content: flex-end;*/
/*起始点垂直居中对齐*/
/*justify-content: center;*/
/*间距上下分散化*/
/*justify-content: space-between;*/
/*间距内边距相同*/
/*justify-content: space-around;*/
/*间距相同*/
/*justify-content: space-evenly;*/
/*5.交叉式轴对齐 当flex-direction: row;装饰y轴, 当flex-direction: column;装饰x轴*/
/*默认设置交叉式轴对齐*/
/*align-items: stretch;*/
/*默认设置交叉式轴垂直居中*/
/*align-items: center;*/
/*默认设置交叉式轴上对齐*/
/*align-items: flex-start;*/
/*默认设置交叉式轴下对齐*/
/*align-items: flex-end;*/
/*默认设置交叉式轴內容对齐*/
/*align-items: baseline;*/
/*6.多行交叉式轴对齐*/
/*align-content: stretch;*/
/*多行交叉式轴垂直居中对齐*/
/*align-content: center;*/
/*多行交叉式轴上对齐*/
/*align-content: flex-start;*/
/*多行交叉式轴下对齐*/
/*align-content: flex-end;*/
/*多行交叉式轴内边距相同*/
/*align-content: space-around;*/
/*多行交叉式轴间距上下分散化*/
/*align-content: space-between;*/
/*多行交叉式轴间距相同*/
/*align-content: space-evenly;*/
flex新项目特性
/*1.操纵新项目顺序*/
/*order: 2;*/
/*2.按占比扩张室内空间，数越大室内空间越大，0值不扩张*/
/*flex-grow: 2;*/
/*3.按占比变小室内空间，数越大室内空间越小，0值不缩小*/
/*flex-shrink: 2;*/
/*4.必须flex-direction相互配合应用，row=宽 column=高，而且优先选择级高于width hight, auto值 让位优先选择级*/
/*flex-basis: 600px;*/
/*5.flex=grow+shrink+basis*/
/*grow =1 && shrink = 1 && basis = auto*/
/*flex: auto;*/
/*grow =0 && shrink = 1 && basis = auto*/
/*flex: initial;*/
/*grow =0 && shrink = 0 && basis = auto*/
/*flex: none;*/
/*6.align-self遮盖器皿的align-items*/
/*align-self: flex-start;*/
到此这篇有关css3 flex完成div內容水平竖直垂直居中的几种方式的文章内容就详细介绍到这了,更多有关css3div水平竖直垂直居中內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！
Copyright © 2002-2020 html网页制作_php网页制作_网页设计稿_网页编辑工具_学生网页设计模板 版权所有 （网站地图） 粤ICP备10235580号