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小时内删除。