text-align在flexbox中不起作用

Question

我无法解决我的问题。在我的div“.display”text-align不起作用。 在flexbox之外，该div正常工作。 请帮忙。

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

*this = file; 

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;
    }