0

I want to line up the tops of the last text items of columns instead of bottom. I am using flex-flow: column nowrap; and margin-top: auto; to get to this point but I am stuck.

As you can see the bottom of the text lined up, where as I want to achieve the last items top to be in line instead

.statistics {
  position: absolute;
  width: 50vw;
  display: flex;
  flex-direction: row;
  padding-left: 43vw;
  padding-top: 5vh;
}

.stat {
  width: 10vw;
  margin-right: 4vw;
  height: 50vh;
  display: flex;
  flex-flow: column nowrap;
}

.source {
  margin-top: auto;
}

body {
    background: #272727;
    color: white;
    overflow: hidden;
    font-weight: 900;
    font-family: ISOCTEUR;
    font-variant-caps: all-petite-caps;
}

h1 {
    margin-top: 0.5vw;
    font-size: 0.86vw;
    text-align: center;
    padding: 0;

}
<div class="statistics">
  <div class="stat">
    <t1>69%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of 18-24 year olds would be more loyal to brand offerings that offer a tech-focused, interactive shopping experience</h1>
    <h1 class="source">— Digital Bridge 2017</h1>
  </div>
  <div class="stat">
    <t1>72%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>said they purchased products they didn’t plan to buy because of AR</h1>
    <h1 class="source">— ICEM 2018</h1>
  </div>
  <div class="stat">
    <t1>16%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of retail sales worldwide In 2020, are expected to account for as ecommerce sales.</h1>
    <h1 class="source">— Statista 2019</h1>
  </div>
  <div class="stat">
    <t1>80%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of people stop doing business with a company because of poor customer experience.</h1>
    <h1 class="source">— Aberdeen Group 2019</h1>
  </div>
</div>
</div>
Jonas Blazinskas
  • 79
  • 10

1 Answers1

0

css for .stat => removed height set width to 13vw;

.statistics {
  position: absolute;
  width: 70vw;
  display: flex;
  flex-direction: row;
  padding-left: 43vw;
  padding-top: 5vh;
}

.stat {
  width: 15vw;
  margin-right: 4vw;
 // height: 30vh;
  display: flex;
  flex-flow: column nowrap;
}

.source {
  margin-top: auto;
}

body {
    background: #272727;
    color: white;
    overflow: hidden;
    font-weight: 900;
   

}

h1 {
    margin-top: 0.5vw;
    font-size: 0.86vw;
    text-align: center;
    padding: 0;

}
<div class="statistics">
  <div class="stat">
    <t1>69%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of 18-24 year olds would be more loyal to brand offerings that offer a tech-focused, interactive shopping experience</h1>
    <h1 class="source">— Digital Bridge 2017</h1>
  </div>
  <div class="stat">
    <t1>72%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>said they purchased products they didn’t plan to buy because of AR</h1>
    <h1 class="source">— ICEM 2018</h1>
  </div>
  <div class="stat">
    <t1>16%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of retail sales worldwide In 2020, are expected to account for as ecommerce sales.</h1>
    <h1 class="source">— Statista 2019</h1>
  </div>
  <div class="stat">
    <t1>80%</t1>
    <div class="container">
      <div class="chart">
        <div class="bar bar-75 white">
          <div class="face top">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-0">
            <div class="growing-bar"></div>
          </div>
          <div class="face floor">
            <div class="growing-bar"></div>
          </div>
          <div class="face side-a"></div>
          <div class="face side-b"></div>
          <div class="face side-1">
            <div class="growing-bar"></div>
          </div>
        </div>
      </div>
    </div>
    <h1>of people stop doing business with a company because of poor customer experience.</h1>
    <h1 class="source">— Aberdeen Group 2019</h1>
  </div>
</div>
</div>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • I want text to line up at the top when some of them are one line and some of them are two lines of text or what ever the length of the text. Instead of just spreading out the text wider to a single line. – Jonas Blazinskas Jul 11 '20 at 19:58
  • I don't think it's a quick fix then. you need to layout the pattern for flex so you flex within flex |--------------------------------------------------------------------| – DCR Jul 11 '20 at 20:02