如何将弹性项目居中？

Question

我想要左边的ABCD，DATE应该在中心。怎么做到这一点？

＆＃13;

＆＃13;

.flex-items {
  display: flex;
  justify-content: flex-start;
  padding-left: 17px;
}

.abcd1 {}

.date1 {
  /*this item should be in the center.*/
}

＆＃13;

<div class="flex-items">
  <div class="abcd1">ABCD</div>
  <div class="date1">DATE</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试此代码

＆＃13;

＆＃13;

.flex-items {

  display: flex;
  justify-content: flex-start;
  padding-left: 17px;
}

.abcd1 {

}

.date1 {
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<div class="flex-items">

<div class="abcd1">ABCD</div>
<div class="date1">DATE</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

见下文。希望这会有所帮助。

＆＃13;

＆＃13;

.flex-items {
  display: flex;
  padding-left: 17px;
  text-align: center;
}

.date1 {
  flex: 1;
}

＆＃13;

<div class="flex-items">
  <div class="abcd1">ABCD</div>
  <div class="date1">DATE</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

文字对齐：中心在提供宽度时有效。 这也有效：

＆＃13;

＆＃13;

.flex-items {
     display: flex;
     justify-content: flex-start;
     padding-left: 17px;
}
.abcd1 {
          
}     
.date1 {
     /*this item should be in the center.*/
     text-align: center;
     width: 100%;
}

＆＃13;

    <div class="flex-items">
    <div class="abcd1">ABCD</div>
    <div class="date1">DATE</div>
</div>

＆＃13;

＆＃13;

＆＃13;