html多行垂直居中显示,html – 垂直居中多行弹性项目

Flex容器的初始设置是flex-direction：row.这意味着容器的子项(“flex items”)将排成一行.

要覆盖此默认值,您可以将flex-wrap：wrap添加到容器中,并将项目宽度设置为100％,这会强制每行一个项目.但是你说这种方法在这种情况下不是一种选择.

所以另一个选择是将容器切换到flex-direction：列.

.wrapper {

width: 100%;

height:100%;

min-height:600px; /*just for example*/

display: flex;

flex-direction: column; /* NEW */

justify-content: center;

align-items: center;

flex-wrap: wrap;

background:#e1e1e1;

}

.row1 {

background: #cdcdcd;

}

.row2 {

background: #404040; color:#fff;

}

This is row one

This is row two