flex布局实现叠在另⼀个div之上_如何利⽤flex布局多⾏多个div
⽔平垂直居中
⽔平垂直⼀直是⼀个经典的问题,最近写⼀个页⾯样式的时候遇到了这个问题,这次需要⽔平垂直居中的是多⾏多个p区块,代码如下:
CSS代码如下:.content {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 100%;
}
flex-wrap属性是指flex布局下的元素是否需要换⾏,该属性⼀共可取三个值,分别是nowrap,wrap,wrap-reverse。默认值是nowwrap(不换⾏),wrap指⼦元素换⾏,并且第⼀⾏在上⾯,wrap-reverse指⼦元素换⾏,第⼀⾏在下⾯。
align-items属性定义项⽬在交叉轴上如何对齐,在这⾥交叉轴的默认⽅向是垂直⽅向,我们选择的值center,也就是与交叉轴的中点对齐,该属性共有以下⼏个值:flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项⽬的第⼀⾏⽂字的基线对齐。
stretch(默认值):如果项⽬未设置⾼度或设为auto,将占满整个容器的⾼度。
这样我们达到了垂直居中的⽬的,还需要⽔平居中。
需要垂直居中的⼦元素的样式代码如下:.chart {
css设置文字垂直居中display: inline-block;
width: 30%;
height: 40%;
margin: 0 auto;
border: 1px solid #000;
}
display: inline-block为了让p同⼀⾏显⽰,在这⾥的宽度和⾼度决定了⼀⾏可以显⽰多少个p区块。
margin: 0 auto就是为了让⼦元素⽔平居中,auto就是⾃动的意思,浏览器会帮助我们进⾏计算,这样我们就达到了⽔平垂直居中了。

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