把一个 div分成上下两部分，如何在上半部分div还未满的情况下元素布局在下半个div

可以通过CSS的Flexbox布局来实现这个效果。

具体步骤如下：

1. 创建一个父容器div，并设置其display属性为flex，使其成为flex容器。
2. 设置父容器div的flex-direction属性为column，使其内部元素从上到下排列。
3. 创建一个上半部分的div，并设置其高度为50%。
4. 创建一个下半部分的div，并设置其flex属性为1，使其占满剩余空间。
5. 在下半部分div中添加需要布局的元素，并设置其样式为align-self: flex-end，使元素在下半部分div中底部对齐。

例如，HTML结构如下：

<div class="parent">
  <div class="top"></div>
  <div class="bottom">
    <div class="element"></div>
  </div>
</div>

CSS样式如下：

.parent {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.top {
  height: 50%;
  background-color: #ccc;
}

.bottom {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background-color: #eee;
}

.element {
  height: 50px;
  width: 100px;
  margin: 10px;
  background-color: #f00;
  align-self: flex-end;
}

这样就可以将一个div分成上下两部分，并在上半部分div还未满的情况下，将元素布局在下半部分div中。