html - 文本对齐在flexbox中不起作用

我无法解决我的问题。在我的div上，“。display”文本对齐不起作用。
在flexbox之外，该div可以正常工作。
请帮忙。

https://codepen.io/grafcheg/pen/LdXbYd

<div class="box">
  <div class="row">
    <button class="btn func reset">C</button>
    <div class="display">1234124</div>
   </div>
</div>

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 250px;
  padding: 15px 15px;
  border-radius: 10px;
  background-color: #f55d2e;
  margin: 0 auto;
}

 .box div{
   display: flex;
   width: 250px;
   height: auto;
}

.display {
  width: 100%;
  height: 100px;
  background-color: white;
  box-shadow: 0 6px #efa424;
  text-shadow: 1px 2px 1px #3E2723;
  border-radius: 7px;
  padding: 2px 2px;
  text-align: right;
}

最佳答案

您可以使用justify-content: flex-end;代替text-align:right;。希望这可以解决您的问题。

.box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      padding: 15px 15px;
      border-radius: 10px;
      background-color: #f55d2e;
      margin: 0 auto;
    }

     .box div{
       display: flex;
       width: 250px;
       height: auto;
    }

    .display {
      width: 100%;
      height: 100px;
      background-color: white;
      box-shadow: 0 6px #efa424;
      text-shadow: 1px 2px 1px #3E2723;
      border-radius: 7px;
      padding: 2px 2px;
      justify-content: flex-end;
    }

关于html - 文本对齐在flexbox中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49702996/