Monday, May 20, 2019

weird flex but ok

Guess 'cause I'm still getting over this fever, but it took a few stabs for making a sponsors display like:
(Looking at it now I realized it would have been a decent candidate for grid or even table, though it's nice that flexbox means you don't have to think about lining up with a row-like object)

I admit I'm falling into bad habit of "px" and non-semantic markup, but Oh Well...

(it is sad that it's 2019 and centering vertically isn't an instant no-brainer)

Anyway: markup like this, with "texty" for a sponsor that has no img:

<div class="sponsors">

<div class="texty"><div>Barry's Village Deli</div></div>
<div><img src="/img/sponsors2019/fastsigns.png"></div>
<div><img src="/img/sponsors2019/Justnextdoor.jpg"><div>Just Next Door</div></div>
//...
</div>
And then CSS like


.sponsors {
    display: flex;
    flex-wrap: wrap;
    width: 845px;
    margin: auto;
}
.sponsors > div {
    margin:20px 2px;
    width:270px;
    height:270px;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    
}
.sponsors > div > div {
    text-align: center;
    width:100%;
}
.sponsors .texty {
    color:white;
    background-color:#2b809e;
    font-size:1.5em;
}
.sponsors img {
    max-width:250px;
    max-height:250px;
}

No comments:

Post a Comment