Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS display:flex align-items:baseline not working in Firefox

I am having trouble creating a consistent flexbox between Chrome, Safari and Firefox. The css I have works great in Chrome/Safari but fails for Firefox. The issue is when I try to have a container element defined as:

.container {
    display: flex;
    align-items: baseline;
}

my children elements align properly in Chrome and Safari but in Firefox they are aligned at the bottom and don't seems to have much bearing on the location of the text.

UPDATE

Ok so having investigated further, I believe the issue is that firefox vs. chrome and safari have a different way of calculating the baseline. I essentially gave up on firefox and created conditional css which will align-items:flex-start when using firefox and otherwise use baseline.

like image 959
Noah Avatar asked Oct 15 '14 14:10

Noah


People also ask

How do you align-content inside a Flex item?

To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .

How do I align an item at Flex end?

flex-end : cross-end margin edge of the items is placed on the cross-end line. center : items are centered in the cross-axis. baseline : items are aligned such as their baselines align. stretch (default): stretch to fill the container (still respect min-width/max-width)

What is baseline in CSS flexbox?

align-items: baseline; The flexbox items are aligned at the baseline of the cross axis. By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.


1 Answers

Here is my article about aligning blocks to their baselines. The example for align-items works ok in Fx except for the bug with overflowed block and paddings, which could be fixed in the same way it is fixed a while later.

However, for your example at http://www.nomadto.com/ things are different: the problem is that when you're doing align-items: baseline, Fx expects to see only inline-content inside, so if you'd replace most nested display: flex with display: inline-flex there, things would be much better. However, as there are a lot of extra wrappers and styles, it is rather hard right now to write you a full patch for fixing stuff, but if you'd create a more simple example somewhere at codepen or jsbin, I could try to fix it to work properly with proper baseline alignment.

like image 140
kizu Avatar answered Oct 11 '22 17:10

kizu