CSS布局问题，FlowChart设计

Question

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

见图像。

在这里输入图像描述

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

​

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