Javascript 定位CSS

我在一个项目中工作，我需要一些帮助。下图是我需要创建的布局：

这张图片是我得到的布局：

步骤（欢迎、准备）应该是一个接一个的，就像

下面是我调用NewAccordion函数的Main.js代码：

          if (procedures[step]){
            return (
              <NewAccordion
                key={`${index}-${step}`}
                index={index}
                opened={currentStepIndex === index}
                procedure={procedures[step]}
                commandSender={sendViewerMessage}
              />
            );
          } else return "";
        })} 

所以，伙计们，我真的不知道怎么了。如果你们能帮助我，我将不胜感激。很抱歉我的英语不好，我来自巴西。

你能这样试试吗：

  <div className="angel__flow" style="display:flex; flex-direction: column">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          <span>{t(procedure.title[i18n.language])}</span>
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </div>

设置显示（！show）}
className={`angel\uuuuu flow\uuuu按钮${show？“活动”：“}`}
aria expanded=“false”
aria controls=“collapseThree”
>     
{t（过程.标题[i18n.语言]）
{index+1}

是否可以使用display:flex；弯曲方向：立柱；在课堂上：.angel\uuu flow？我尝试了这个，但错误仍然存在，这就是float的作用。。。使块元素彼此相邻浮动。您需要考虑使用不同的方法来实现此布局-如果需要这样做，请查看flex、网格甚至嵌套块。是否可以使用div而不是像update那样的article标记？

.angel__flow {
    display: block;
    width: 33.333333333333%;
    float: left;
    height: calc(100vh - 64px);
    text-align: center;
    overflow-x: scroll;
    padding: 8px;
    box-sizing: border-box;
}

  <div className="angel__flow" style="display:flex; flex-direction: column">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          <span>{t(procedure.title[i18n.language])}</span>
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </div>