下面是一个使用HTML div元素和flexbox设计基本数据表示例：

<div class="table">
  <div class="row header">
    <div class="cell">ID</div>
    <div class="cell">Name</div>
    <div class="cell">Age</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">John Doe</div>
    <div class="cell">28</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">Jane Doe</div>
    <div class="cell">32</div>
  </div>
</div>

下面是使用flexbox创建表格结构的相应CSS：

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  border-collapse: collapse;
}

.row {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}

.header {
  font-weight: bold;
}

.cell {
  flex: 1;
  padding: 4px;
}

在此示例中，我们使用挠曲方向：列垂直堆叠行，flex-direction：行来水平显示单元格。我们还在每个.cell上使用flex属性来在单元格之间均匀分布可用空间，并使用padding在单元格内容和单元格边框之间添加一些间距。.header类用于对表格标题行设置不同的样式。
对于ProgressBar，您可以使用以下代码：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个