CSS Layout Проблемы, блок-схема, дизайн

Question

мне нужно построить динамический шаблон для создания диаграммы диаграммы потоков, но только с HTML и CSS

См изображения.

enter image description here

• Черный DIV должен иметь определенную ширину и высоту.
• Красный DIV представляет собой ряд в черном DIV.
• Зеленые DIV представляют собой коробки с рамкой и определенным размером с высотой 100px и шириной 200px.
• Должна быть возможность добавить два или более зеленых DIVs в один красный 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); 
}