html - Flex box，内容右对齐

Question

我需要在其容器 div op__list__operator 和 op__add__icon 的右侧对齐。 我试过 text-align 但不起作用。

知道怎么解决吗？非常感谢大家!

.op {
  width: 250px;
  height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.5);
}

.op__add {
  background-color: yellow;
}

.op__add__icon {
  width: 70px;
  height: 70px;
  background-color: #446ac2;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.75);
}

.op__add__icon:hover {
  filter: brightness(110%);
}

.op__add__icon .material-icons.md-38 {
  font-size: 38px;
}

.op__list {}

.op__list__operator {
  display: flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}

.op__list__operator__label {
  width: 123px;
  height: 32px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op__list__operator__label__value {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
}

.op__list__operator__icon {}

<div class="op">
  <div class="op__list">
    <div class="op__list__operator">
      <div class="op__list__operator__label">
        <div class="op__list__operator__label__value">
          hello
        </div>

      </div>
      <div class="op__list__operator__icon">
        <i>avatar</i>
      </div>
    </div>
  </div>
  <div class="op__add">
    <div class="op__add__icon">
      <i>x</i>
    </div>
  </div>
</div>

Answer 1

使用inline-flex代替.op__list__operator，并将text-align:right设置为.op__list

.op__list {
  text-align:right
}

.op__list__operator {
  display: inline-flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}

.op {
  width: 250px;
  height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.5);
}

.op__add {
  background-color: yellow;
}

.op__add__icon {
  width: 70px;
  height: 70px;
  background-color: #446ac2;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.75);
}

.op__add__icon:hover {
  filter: brightness(110%);
}

.op__add__icon .material-icons.md-38 {
  font-size: 38px;
}

.op__list {
  text-align:right
}

.op__list__operator {
  display: inline-flex;
  justify-content: space-between;
  background-color: orange;
  width: 173px;
}

.op__list__operator__label {
  width: 123px;
  height: 32px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.op__list__operator__label__value {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 13px;
}

.op__list__operator__icon {}

<div class="op">
  <div class="op__list">
    <div class="op__list__operator">
      <div class="op__list__operator__label">
        <div class="op__list__operator__label__value">
          hello
        </div>

      </div>
      <div class="op__list__operator__icon">
        <i>avatar</i>
      </div>
    </div>
  </div>
  <div class="op__add">
    <div class="op__add__icon">
      <i>x</i>
    </div>
  </div>
</div>