But the middle row has two posts without images, so it went by the element that was first instead: the dates. This also explained the inconsistency! Posts in the first and third rows all have images, so it aligned the articles based on the bottoms of those. This was the simple answer I'd been looking for! Baseline takes the first element in each flex item, and lines things up by the bottom of that element. Images again in the third row- Bryan Robinson October 8, 2021 Looks like it's aligning the first items' baselines. So like all confused people with little self-esteem and even less to lose, I turned to Twitter. But I got explanations that were either too sparse or too jargon-filled. I did a few google searches to find out exactly how baseline aligns content. How could an alignment changed by a single rule give me such random results?
But I checked each element and nothing explained the alignment in each row. I was guessing flexbox was aligning things by a particular element. This confused me since the results looked inconsistent. Can anyone explain it? /vJEr5ENHh9- Max Antonucci October 8, 2021 I'm not understand why flexbox's "align-item: baseline" is doing this. My own site's article listing is a flex container, so I threw on align-items: baseline out of curiosity. center aligns each element along the row's center axisīut an article I read mentioned the baseline value, and I didn't know that one.flex-end aligns each element to the end of the row.flex-start aligns each element to the top of that row.stretch is the default value, and it makes each one the height of the tallest element in that row.I know how the most common values you'd give it work: When you have a row of items in a flex container, it controls how they line up in that row. But now that gap has gotten good browser support, even that's no longer an issue.īut while it doesn't inconvenience me anywhere, it still surprises me. My only qualm was having to calculate margins and paddings to space elements in a flex container. I can't count the number of times flexbox has made an otherwise painful design layout easy.
0 kommentar(er)
