Getting even - flex problem

HTML & CSS
1

I spent 5 hours on this last night to no avail.

The screenshot is at iPhone 6+ size, but once this goes off the the client the actual sound clip names will be longer and more varied. I need the bottom box to line up. This is my HTML

<ul class="sounds">
         <li><a href="/Audio/going_outside.mp3" class="sm2_button"><span>Going Outside</span></a></li>
          <li><a href="/Audio/office_lobby.mp3" class="sm2_button"><span>Office Lobby Entrance</span></a></li>
          <li><a href="/Audio/coins.mp3" class="sm2_button"><span>Coins</span></a></li>
          <li><a href="/Audio/rain.mp3" class="sm2_button"><span>Rain</span></a></li>
          <li><a href="/Audio/fancy-beer-bottle-pop.mp3" class="sm2_button"><span>Fancy Beer Bottle Pop</span></a></li>
          <li><a href="/Audio/bass.mp3" class="sm2_button"><span>Bass</span></a></li>
          <li><a href="/Audio/1hz-10khz-sweep.mp3" class="sm2_button"><span>Sweep</span></a></li>
          <li><a href="/Audio/background0.mp3" class="sm2_button"><span>Background</span></a></li>
      </ul>

The whole area must be clickable. At this point what I need to figure out is how to get the boxes at the bottom to be the same height on a given row, with text vertically centered, regardless of how many lines the largest box has. Everything I tried last night wouldn’t work - I could get the container to be the same height, but never the children.

To add the challenge, unless the html is changed there are no more :before / :after psuedo elements available - they are occupied making those tiny yellow corner marks in the design. They are absolutely positioned, and as a result the li, a and span tags are all set position: relative so they will go to their correct locations.

I’m completely stumped here.

2

Could you post a jsfiddle for us? Live website?

I’d probably do display:table-cell for this. Easily get equal heights and if you apply it to the anchors, the entire box will be clickable. From there, vertical alignment is simple. Any particular reason you are using flex?

Either way, we can’t do anything without a codepen/jsfiddle/site. Or a minimum, the CSS.

3

Any particular reason you are using flex?

The exact number of cells is not known, and the number of cells per row changes by device width, rendering table layout impossible.

I can compose a jsfiddle, but it will take awhile. I have other projects of higher priority today, and the surrounding page has a lot of “noise” that I need to strip to get down to the problem at hand.

4

It doesn’t have to be a jsfiddle. A live website will do.

5

It’s in pre-production and the test servers are cordoned off from the open internet.

6

Just the CSS then so we can recreate it?

7

Messing around with display: flex a bit, I came up with this:

I’ve added in extra hooks (b and i for extra styling if needed.)

You can add or remove list items as needed, and they wrap on narrow screens.

2 Likes
8

Nice demo Ralph :smile:

Flexbox is about the only way to do this automatically when you need rows that wrap and still stay the same size compared to the other items in the row.

I did mess about with this a couple of years ago but only go but it only really worked in Firefox and was to convoluted to use for real.

The only other option is to arbitrarily give a min-height to all the boxes and hope it fits most cases…

1 Like
9

What was up there didn’t work but it did point me in the correct direction to reach something that did work - mostly. So for that I am very, very thankful.

What still isn’t working is Firefox - the design I arrived at breaks in Firefox’s implementation of Flex. I can’t reveal the site until it launches which will be in a few days, and it’s going to launch with flex only on the browsers that understand the -webkit prefix. At that time I’ll provide a URI to the page along with a local stylesheet to reactivate flex on Firefox (basically just pull all the webkit prefixes) and see if anyone else can figure out what’s going wrong.

10

That’s a shame. I guess there are still bugs and variations in implementations.

Look forward to seeing the finished page :smile:

11

Look forward to showing it off. I will say this, my solution involved using a spacer.gif. I haven’t used one of those in years. I feel dirty.

12

lol - that brings back memories :smile:

Don’t feel ashamed sometimes you just have to go with what works.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.