Override css flex align-content for a child

Question

How can i override align-content: flex-start for a child in the flexbox model? I want to move .Card__bottom to the bottom of my card. Or maybe i can achieve this without align-content: flex-start? But when i remove this property, i get a greater line spacing

body {
  background: #dddddd;
  padding: 30px;
}

.Card {
  width: 320px;
  min-height: 200px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px 20px 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

.Card__heading {
  margin: 0;
  flex-basis: 200px;
}

.Card__icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Card__description {
  margin: 10px 0;
}

.Card__action {
  margin: 0 0 10px;
  align-items: center;
  width: 100%;
}

.Card__bottom {
  align-self: flex-end;
}

<div class="Card">
  <h2 class="Card__heading">
    Heading
  </h2>
  <div class="Card__icon-wrapper">
    <span class="Card__icon"></span>
  </div>
  <p class="Card__description">
    Description
  </p>
  <p class="Card__action">
    Action Text
  </p>
  <div class="Card__bottom">
    Bottom
  </div>
</div>

Not sure what description box is supposed to hold, you should try with real content to see what happens (action on the row below heading & descrition. grid could be a better choice if it is not, after all, a typical HTML table here ... else for the markup, there is header, footer and also section tags to describe content. Here you look like trying to lay a table layout like with only div tags. — G-Cyrillus, Nov 08 '19 at 10:30
*"How can I override `align-content: flex-start` for a child in the flexbox model?"* `align-content` doesn't apply to flex children. It applies to flex lines. Use `flex-direction: column` or grid layout. See this post for an explanation: [How does flex-wrap work with align-self, align-items and align-content?](https://stackoverflow.com/q/42613359/3597276) — Michael Benjamin, Nov 08 '19 at 16:52

score 0 · Answer 1 · answered Nov 08 '19 at 09:35

I'll add an extra container seperating the bottom and top

    <div class="Card">
<div class="Card__top">
      <h2 class="Card__heading">
        Heading
      </h2>
      <div class="Card__icon-wrapper">
        <span class="Card__icon"></span>
      </div>
      <p class="Card__description">
        Description
      </p>
      <p class="Card__action">
        Action Text
      </p>
</div>
      <div class="Card__bottom">
        Bottom
      </div>
    </div>

and exchange the following css:

    .Card {
  width: 320px;
  min-height: 200px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px 20px 30px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

i forgot you'll have to add flex magic to Card_top (flex-direction: column;display:flex) — hisablik, Nov 08 '19 at 09:36

score 0 · Accepted Answer · edited Nov 11 '19 at 15:22

A grid structure is more appropritate here:

body {
  background: #dddddd;
  padding: 30px;
}

.Card {
  width: 320px;
  min-height: 200px;
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px 20px 30px;
  display: grid;
  /* 3 Rows and the middle one taking the free space pushing the last one*/
  grid-template-rows: auto auto 1fr;
  /* 2 Columns and the first one taking the free space pushing the two other*/
  grid-template-columns: 1fr auto;
}

.Card__heading {
  margin: 0;
}

.Card__icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Card__description {
  margin: 10px 0;
}

.Card__action {
  margin: 0 0 10px;
  grid-column:span 2; /* Full width (span the 2 columns)*/
}

.Card__bottom {
  grid-column:span 2; /* Full width (span the 2 columns)*/
}

<div class="Card">
  <h2 class="Card__heading">
    Heading
  </h2>
  <div class="Card__icon-wrapper">
    <span class="Card__icon"></span>
  </div>
  <p class="Card__description">
    Description
  </p>
  <p class="Card__action">
    Action Text
  </p>
  <div class="Card__bottom">
    Bottom
  </div>
</div>

Override css flex align-content for a child

2 Answers2