javascript - CSS布局问题、流程图设计

Question

我需要构建一个动态模板来创建流程图，但只能使用 HTML 和 CSS

见图片。

enter image description here

• 黑色 DIV 应具有定义的宽度和高度。
• 红色 DIV 代表黑色 DIV 中的一行。
• 绿色的 DIV 是带有边框和定义大小的框，高度为 100 像素，宽度为 200 像素。
• 应该可以将两个或多个绿色 DIV 添加到一个红色 DIV 中(参见黄色矩形)
• 所有内容应居中对齐(见蓝线)

.page {
position: relative;
width: 800px;
height: 800px;
}

.row{
width: 100%;
text-align: center;
margin-bottom: 10px;
}

.element{
 display: inline-block;
 text-align: center;
 width: 200px;
 height: 50px;
 border: 1px solid #000;
 }

<div class="page">
  <div class="row">
    <div class="element">Start</div>
  </div>
  <div class="row">
    <div class="element">Step_1</div>
    <div class="element">Step_2</div>
  </div>
  <div class="row">
    <div class="element">Step_1_2</div>
  </div>
  <div class="row">
    <div class="element">Ende</div>
  </div>
</div>

也许有人可以帮我实现布局。谢谢

Answer 1

我认为您正在寻找这样的东西:https://jsfiddle.net/m1pz6zcu/

.page {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
}

.row {
  width: calc(100% - 2px);
  border-style: solid;
  border-width: 1px;
  border-color: red;
  display: flex;
  height: calc(25% - 2px);
}

.element {
  min-width: 20%;
  border-style: solid;
  border-width: 1px;
  border-color: green;
  margin-right: auto;
  margin-left: auto;
  height: 50px;
  height: calc(100% - 2px);
}