Question

因此，我有一个小部件，其标题，正文，页脚及其嵌套的divs位于标题中，用于徽标，名称和控件。并努力使它们正确对齐。

您可能会在下面看到-[名称]和[Ctrls]不会出现在水平线的中心（如徽标中间，align-self：center;），这是我无法理解的原因工作。任何想法，我想念的是什么？

.card {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  align-items: flex-start;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  overflow: hidden;
  perspective: 1px;
  border-radius: 10px;
  color: #1B65B3;
}

.card:hover {
  border-top: 2px solid #6777ef;
}

.card-header>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 5px;
}

.card-header {
  background-header: #header;
  background-color: #FFCD42;
  width: 100%;
}

.card-logo {
  float: left;
  background-color: #63B0C0;
  margin-left: 200px;
  width: 20%;
}

.card-name {
  float: left;
  background-color: #14ADCF;
  align-self: center;
  height: 30px;
}

.card-header .card-name {
  align-self: center;
}

.card-controls {
  float: right;
  background-color: #6AC239;
  width: 10%;
}

.card-body {
  background-color: #3cb371;
  width: 100%;
}

.card-footer {
  background-color: #D83790;
  width: 100%;
}

<div class="card">
  <div class="card-header">
    <div class="card-logo">
      <img height="100%" width="100%" src="data:image/png;base64,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">
    </div>
    <div class="card-name">
      [Name]
    </div>
    <div class="card-controls">
      [Ctrls]
      <a href="#" class="js-card-fullscreen icon"></a>
      <a href="#" class="js-card-refresh icon"></a>
      <div class="dropdown">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="icon mdi  mdi-dots-vertical"></i>
        </a>

      </div>
    </div>
  </div>
  <div class="card-body">
    [Body]
  </div>
  <div class="card-footer">
    [Card footer]
  </div>
</div>

Answer 1

您需要将flex放置在标题容器上，而不是子div上，然后可以删除浮点数，并且align-self可以正常工作。

为了使ctrl正确，我还在标题上使用了select t.order_a, t.order_b, case when t.sum_qty = 0 THEN 0 else round(sum_qty -sum_order / (SUM(A.qty) * 0.01), 2) END percent FROM ( SELECT A.qty, A.ord order_a, B.ord order_b, SUM(A.qty) sum_qty, SUM(A.ord) sum_order FROM A INNER JOIN B ON A.COD = B.COD GROUP BY A.order_A, B.order_B ) t，然后在名称上使用了margin-right auto

justify-content:space-between

.card {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  align-items: flex-start;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  overflow: hidden;
  perspective: 1px;
  border-radius: 10px;
  color: #1B65B3;
}

.card:hover {
  border-top: 2px solid #6777ef;
}

.card-header>div {
  margin: 5px;
}

.card-header {
  background-header: #header;
  background-color: #FFCD42;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}

.card-logo {
  background-color: #63B0C0;
  margin-left: 200px;
  width: 20%;
}

.card-name {
  background-color: #14ADCF;
  align-self: center;
  height: 30px;
}

.card-header .card-name {
  align-self: center;
  margin-right:auto;
}

.card-controls {
  background-color: #6AC239;
  width: 10%;
  align-self: center;
}

.card-body {
  background-color: #3cb371;
  width: 100%;
}

.card-footer {
  background-color: #D83790;
  width: 100%;
}

用flex对齐div不能按预期工作

1 个答案: