[css-d] Flexbox issue

[Tom Livingston]

Hi listers,

Code:

.statistic-flexwrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    .statistic-box{
        @include font-size(22px);
        line-height: 1.7;
        background-color: rgba(#fff, 0.8);
        color: $darkgrey;
        flex: 0 1 300px;
        padding: 25px 35px;
        margin-bottom: 30px;
        text-align: left;

        strong{
            @include font-size(34px);
            line-height: 1.3;
            color: $medblue;
        }
        i{
            @include font-size(16px);
        }
    }
    .statistic-box:last-child{
        margin: 0;
    }
}
@media all and (min-width: 668px){
    .statistic-flexwrap{
        justify-content: space-between;
        max-width: 850px;
        margin: 0 auto;

        .statistic-box{
            flex: 0 1 47%;
        }
    }
}

<div class="statistic-flexwrap">
<div class="statistic-box">
<p>Sleep apnea ruins relationships and is a leading cause of divorce
&ndash; <strong>25% of couples sleep in separate bedrooms.</strong><br><i>-
Chicago Tribune, 2017</i></p>
</div>
<div class="statistic-box">
<p><strong>105+ million Americans</strong> &ndash; 1 in 3 adults &ndash; do
not get the minimum recommended seven hours of sleep per night.<br><i>-
CDC, 2016</i></p>
</div>
<div class="statistic-box">
<p>Lorem ipsum dolore erat unum <strong>lorem ipsum dolor unum
erat</strong> lorem unumipsum dolor unum eratlore lorem ipsum dolore erat
unum.<br><i>- Sample, 20XX</i></p>
</div>
<div class="statistic-box">
<p>Lack of sleep leads to an estimated <strong>$411 billion in lost
productivity</strong> per year in the U.S. workforce &ndash; the equivalent
of 1.2 million working days.<br><i>- Fortune.com, 2016</i></p>
</div>
<div class="statistic-box">
<p>Lorem ipsum dolore erat unum <strong>lorem ipsum dolor unum
erat</strong> lorem unumipsum dolor unum eratlore lorem ipsum dolore erat
unum.<br><i>- Sample, 20XX</i></p>
</div>
</div>

This gets me almost where I want. 3 boxes on the left, 2 on the right. What
I am looking for is a way to have the two on the right vertically centered
in the parent. Can flex do that? align-content: centered; isn't doing it. I
may just be confused about axis, but it's just not clicking for me.

Thoughts?

-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [css-d@css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/