如何根据其他2个项目对齐项目？

Question

我正在尝试在Flexbox中对齐3个项目。 为了使事情变得简单，这是当前的布局

这里的目标是使数字（1、2、3等）在左侧保持严格对齐，文本也必须严格对齐（以便向上箭头垂直对齐），并且右侧图标应移至只要它在div中，它就必须走到哪里。

这是代码：

.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
  display: flex;
  justify-content: space-between;
}

HTML：

<div class="div-container">
    <div class="form-div-container">
        <div class="small-text">
            <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="even-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-longer-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="small-text-two">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
    </div>
</div>

问题是图标的宽度并非全部相同，因此它们会推中间的项目。我该如何按照自己的方式做事？谢谢！

Answer 1

您可以将包含数字和图标的元素的宽度设置为固定的百分比值，如下所示：

.box__icon,
.box__number {
  width: 15%;
  text-align: center;
}

查看下面的完整演示：

/*IGNORE STYLE RULES FROM HERE......*/

body {
  margin: 0;
}
i {
  font-style: normal;
}

.box {
  color: white;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: bold;
  padding: 30px;
}

.box:nth-child(1) {
  background: firebrick;
}

.box:nth-child(2) {
  background: darkturquoise;
}

.box:nth-child(3) {
  background: chocolate;
}

.box:nth-child(4) {
  background: midnightblue;
}


.box__text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #ffffff transparent;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

/*.... TO HERE*/


.box {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.box__icon,
.box__number {
  width: 15%; /*Change this to whatever value you want*/
  text-align: center;
}

.box__text {
  color: white;
  font-family: sans-serif;
  text-align: center;
}

<div class="container">
  <div class="box">
    <div class="box__number">1</div>
    <p class="box__text">Small Text</p>
    <i class="box__icon">Icon---</i>
  </div>
  <div class="box">
    <div class="box__number">2</div>
    <p class="box__text">Longer Text</p>
    <i class="box__icon">Icon</i>
  </div>
  <div class="box">
    <div class="box__number">3</div>
    <p class="box__text">Even Longer Text</p>
    <i class="box__icon">Icon--</i>
  </div>
  <div class="box">
    <div class="box__number">4</div>
    <p class="box__text">Longer Longer Longer Text</p>
    <i class="box__icon">Icon---</i>
  </div>
</div>