html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法

大家好，又见面了，我是你们的朋友全栈君。

一、flex-direction: (元素排列方向)

※ flex-direction:row (横向从左到右排列==左对齐)

4f8fd3b08ed5f3a7eca22950136c217f.png

※ flex-direction:row-reverse (与row 相反)

d02273ce47381039f8e000964a624baf.png

※ flex-direction:column (从上往下排列==顶对齐)

e05b6bdcf685bf8f46bb1be13166f8d8.png

※ flex-direction:column-reverse (与column 相反)

7397e755fce362977a4772754f10dbaa.png

二、flex-wrap: (内容一行容不下的时候才有效)

※flex-wrap:nowrap (超出不换行，很奇怪里面的宽度会变成100%)

a6397226d00d9af233a7d0f1678e935b.png

※ flex-wrap:wrap (超出按父级的高度平分)

c5e021cd2d6f9c458ef9779139457a95.png

※flex-wrap:wrap-reverse(与wrap 相反)

301f9a2a76ed5b7f8849a16efc66b1f5.png

三、justify-content: (水平对齐方式)

※flex-start (水平左对齐)

8e8ad5385091bed70513cd0ff084bb1f.png

※ justify-content:flex-end; (水平右对齐)

f0ad23f8b77666627b33ce73f34f1b31.png

※ justify-content:center;(水平居中对齐)

cfcb4528c616a8f79bb6ad5750ab6def.png

※justify-content:space-between; (两端对齐)

1bf09a817e25996b2c1a6dd520599c29.png

※justify-content:space-around; (两端间距对其)

894c99200f3f61c92997d2de0d7d6c0b.png

四、align-items: (垂直对齐方式)

※ align-items:stretch; (默认)

6d885a4c12c28c5128752d4ed9f87aed.png

※align-items:flex-start; (上对齐，和默认差不多)

30579fae63cf978d09f87abb7c9bbea9.png

※align-items:flex-end; (下对齐)

dd5d2f15596654b650567bd8c686ae03.png

※ align-items:center;(居中对齐)

6445ffa6311e5f7fd138d312be0d5013.png

=※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;*/

/*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水平垂直居中内容请搜索萬仟网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持萬仟网！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138974.html原文链接：https://javaforall.cn