html - text-align 在 flexbox 中不起作用

Question

我无法解决我的问题。在我的 div“.display”上，text-align 不起作用。在 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;
}

Answer 1

您可以使用 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;
    }