使用 Flex 垂直对齐 col > row 中的项目

Question

我对 Flex 还很陌生，想知道是否有办法让我在 col -> 行中对齐某些项目。我正在考虑保持它的弹性（最好不使用浮点数），因为它会让我的响应更容易，但我对 HTML 和 CSS.[=14= 的变化持开放态度]

我有这张通过 bootstrap:

制作的垂直对齐卡片

我希望指标和标签位于底部，其余的位于顶部。

.performance-type {
  font-size: 18px;
}

.performance-number {
  font-size: 18px;
  font-weight: bold;
}

<div class="card mt-4">
  <div class="row p-3">
    <div class="col-md-4">
      <img src="https://voiceboxglobaldebug.s3.eu-west-2.amazonaws.com/Kuga_PHEV_ENQUIRY_DAY_1..jpg" class="img-thumbnail" style="max-width: 100%;" alt="">
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">
          <h2 class="title-sub-section font-weight-bold mt-3">March 12, 2022 10:40pm</h2>
        </div>
        <div class="col-md-6 text-right mt-3">
          <i class="fab fa-facebook mr-1 facebook-icon"></i>
          <span class="pr-2 font-weight-bold">Some Facebook Page</span>
        </div>
      </div>
      <p>Post description goes here...</p>
      <div class="row p-0">
        <hr class="mt-2 mb-2">
        <div class="col-md-2">
          <span class="performance-type">Post Clicks</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Reactions</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Impressions</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Reach</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Eng. Rate</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Spend</span>
          <div>
            <span class="mr-2 performance-number">--</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

其他都是bootstrap。

最终结果应如下所示：

Answer 1

使用align-self: center;属性

Answer 2

只需进行这两个更改即可。

<div class="col-md-8 d-flex flex-column"
<div class="row p-0 mt-auto">

Answer 3

一种方法是为 col-md-8 中的所有内容创建一个容器，并将其也设为弹性框。然后，您可以将弹性方向设置为列，并将底部边距 div 设置为 auto 0 0，它将位于底部。

HTML:

<div class="col-md-8">
      <div class="card-details">
        <div class="row">
          <div class="col-md-6">
            <h2 class="title-sub-section font-weight-bold mt-3">March 12, 2022 10:40pm</h2>
          </div>
          <div class="col-md-6 text-right mt-3">
            <i class="fab fa-facebook mr-1 facebook-icon"></i>
            <span class="pr-2 font-weight-bold">Some Facebook Page</span>
          </div>
        </div>
        <p>Post description goes here...</p>
        <div class="row p-0">
          <hr class="mt-2 mb-2">
          <div class="col-md-2">
            <span class="performance-type">Post Clicks</span>
            <div>
              <span class="mr-2 performance-number">21</span>
            </div>
          </div>
          <div class="col-md-2">
            <span class="performance-type">Reactions</span>
            <div>
              <span class="mr-2 performance-number">21</span>
            </div>
          </div>
          <div class="col-md-2">
            <span class="performance-type">Impressions</span>
            <div>
              <span class="mr-2 performance-number">21</span>
            </div>
          </div>
          <div class="col-md-2">
            <span class="performance-type">Reach</span>
            <div>
              <span class="mr-2 performance-number">21</span>
            </div>
          </div>
          <div class="col-md-2">
            <span class="performance-type">Eng. Rate</span>
            <div>
              <span class="mr-2 performance-number">21</span>
            </div>
          </div>
          <div class="col-md-2">
            <span class="performance-type">Spend</span>
            <div>
              <span class="mr-2 performance-number">--</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS:

.card-details {
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.card-details > *:last-child {
  margin: auto 0 0 ;
}

Take a look at the codepen

使用 Flex 垂直对齐 col > row 中的项目

Vertically aligning items in a col > row using Flex

html

css

flexbox

angular-bootstrap