使用 Flexbox 在盒子中定位元素

Question

我一直在尝试让一排响应式框呈现出更好的外观。经过大量的努力和谷歌搜索，我来这里是为了得到专家的意见。请查看下图：

最外面的红色是带有display:flex; 的引导灵活行 每个盒子，第一个用绿色盒子表示，有flex: 1 ...;

到目前为止，没有任何问题，我的 CSS 在所有屏幕尺寸上都能完美运行，显示所有框的高度和宽度都相同。我只有两个问题需要帮助。

问题 1：

我需要盒子的下部（由橙色边框表示）可能始终位于绿色盒子的底部。这样所有按钮都将出现在同一行。 我尝试在每个框中使用包装器 div，然后将包装器的位置属性设置为相对，将内部 div（黄色和橙色）的位置属性设置为绝对。然后我将较低的设置为底部：0px;。但它不适用于 flex，需要我提及我无法提及的包装器的固定高度。

问题 2：

在带有蓝色边框的框中，我需要对齐所有行的文本，除了最后一行应该左对齐。

Answer 1

问题 1

将display: flex 分配给绿色框显示的div。之后，将align-self: flex-end; 添加到橙色框中。橙色框现在应该显示在绿色框的末尾。

问题 2

使用以下修复来实现您想要的：

.blue-box {
    text-align: justify;  
    -moz-text-align-last: right;
    text-align-last: left;
}

问题在于 Mac 和 iOS 设备上的 Safari 不支持此功能。您必须添加更多标记才能覆盖 Safari。如果可能的话，一个示例是将每个文本行包装到 p 标记中。然后你可以这样做：

.blue-box p {
    text-align: justify;  
}

.blue-box p:last-child {
    text-align: left;  
}

如果修复对您有用，请报告。

Answer 2

解决这个问题的最好方法是使用 flexbox。

.promo-boxes {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color:black;
}

.promo-box {
    width: 100px;
    border: solid 1px #ccc;
    background-color:red;
    display: flex;  
}

.btns-wrapper {
  margin-top: auto;
  align-self: flex-end;
}

<div class="promo-boxes">
  <div class="promo-box">
    <div>test 2</div>
    <div class="btns-wrapper">
     <button>
     subscribe
     </button>
    </div>
  </div>
  <div class="promo-box">
  <div>
      test 3
    </div>
    <div class="btns-wrapper">
    
    </div>
  </div>
  <div class="promo-box">
  <div>
      test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      loooong
    </div>
    <div class="btns-wrapper">
    
    </div>
  </div>
</div>