Question

我正在尝试垂直对齐包装器的子DIV，但遗憾的是没有。要求是屏幕包装的全宽和高度，其中两个子DIV垂直和水平居中。（div的高度由jQuery处理，以使窗口高度）

注意：我不想让孩子DIV width:100%

这就是我的尝试：

＆＃13;

.wrapper {
  width: 100%;
  height:100%;
  min-height:600px; /*just for example*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background:#e1e1e1;
}
.row1 {
  background: #cdcdcd;
}
.row2 {
  background: #404040; color:#fff;
}

＆＃13;

<div class="wrapper">
  <div class="row1">This is row one</div>
  <div class="row2">This is row two</div>
</div>

＆＃13;

Answer 1

Flex容器的初始设置为flex-direction: row。这意味着容器的子项（＆＃34; flex items＆＃34;）将排成一行。

要覆盖此默认设置，您可以将flex-wrap: wrap添加到容器中并提供项目width: 100%，这会强制每行一个项目。但是你说这种方法在这种情况下不是一种选择。

另一个选择是将容器切换到flex-direction: column。

＆＃13;

.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;
}

＆＃13;

<div class="wrapper">
  <div class="row1">This is row one</div>
  <div class="row2">This is row two</div>
</div>

＆＃13;

垂直居中多行弹性项目

1 个答案: