htmlflex上下居中,css3flex实现div内容⽔平垂直居中的⼏种⽅
法
⼀、flex-direction: (元素排列⽅向)
※ flex-direction:row (横向从左到右排列==左对齐)
※ flex-direction:row-reverse (与row 相反)
※ flex-direction:column (从上往下排列==顶对齐)
※ flex-direction:column-reverse (与column 相反)
⼆、flex-wrap: (内容⼀⾏容不下的时候才有效)
※flex-wrap:nowrap (超出不换⾏，很奇怪⾥⾯的宽度会变成100%)
※ flex-wrap:wrap (超出按⽗级的⾼度平分)
※flex-wrap:wrap-reverse(与wrap 相反)
三、justify-content: (⽔平对齐⽅式)
※flex-start (⽔平左对齐)
※ justify-content:flex-end; (⽔平右对齐)
※ justify-content:center;(⽔平居中对齐)
※justify-content:space-between; (两端对齐)
※justify-content:space-around; (两端间距对其)
四、align-items: (垂直对齐⽅式)
※ align-items:stretch; (默认)
※align-items:flex-start; (上对齐，和默认差不多)
※align-items:flex-end; (下对齐)
※ align-items:center;(居中对齐)
=※align-items:baseline; (基线对齐)
如弹性盒⼦元素的⾏内轴与侧轴(纵轴)为同⼀条，则该值与'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;*/
html怎么让所有内容居中/*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⽔平垂直居中内容请搜索萬仟⽹以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持萬仟⽹！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。