Actually, here is a screenshot of the problem.
Top to bottom: 1 - Chrome, 2 - Opera, 3 - Firefox, 4 - Edge.

screenshot

Below I gave the code that I run (hopefully).
For super-maximum convenience, here's a codepen . It seems to me more convenient.

The basic idea is that the Gallery inscription and the logo should be positioned in the center, and the rest on the sides, but that their dimensions are not taken into account in order to center the two main elements of the inscription and the logo.
transform will be used for animation, so you still need to position in the center and direct the rest categories from there.

I’m immensely grateful if you can help me figure out how to maintain flex in Firefox without crawling and rewriting the entire positioning code.

 .gallerypage { margin: 0; padding: 0; background: #fff; } .gallerypage .header { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100px; background: gray; } .gallerypage .header a { cursor: pointer; position: absolute; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; text-align: center; white-space: pre-wrap; text-indent: -6px; line-height: 30px; font-family: "Kaushan Script", cursive; font-size: 30px; } .gallerypage .header .sketches { background-color: #fff; width: 110px; -webkit-transform: translate(-400px, 0px); -ms-transform: translate(-400px, 0px); transform: translate(-400px, 0px); } .gallerypage .header .smth { background-color: #fff; width: 140px; height: 60px; -webkit-transform: translate(-200px, 0px); -ms-transform: translate(-200px, 0px); transform: translate(-200px, 0px); } .gallerypage .header .gallery { position: static; text-indent: -14px; line-height: normal; width: 185px; height: 90px; background: gold; font-size: 60px; } .gallerypage .header .logo { position: static; width: 60px; height: 80px; background: hotpink; } .gallerypage .header .logo .vs-logo { display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 60px; height: 80px; } .gallerypage .header .blog { background-color: #fff; width: 60px; height: 38px; -webkit-transform: translate(200px, 0px); -ms-transform: translate(200px, 0px); transform: translate(200px, 0px); } .gallerypage .header .about { white-space: pre-wrap; background-color: #fff; width: 100px; -webkit-transform: translate(400px, 0px); -ms-transform: translate(400px, 0px); transform: translate(400px, 0px); } 
 <div class="gallerypage"> <div class="header"> <a class="sketches">Sketches</a> <a class="smth">Something serious</a> <a class="gallery">Gallery</a><a class="logo"></a> <a class="blog">Blog</a><a class="about">About it</a> </div> </div>

  • More specifically, this position: absolute and display:flex together somehow work incorrectly. But this is just my guess, I have no idea what's what ( - VostokSisters
  • It is very regrettable that in which case the problem is in the browser / library, and not in your code. - Vadim Ovchinnikov
  • Why do you use flexbox and absolute positioning? In this case, absolute positioning is the purest hack. - Vadim Ovchinnikov
  • @VadimOvchinnikov, and what should I use? Negative margins? - VostokSisters
  • In principle, it is possible, but better without them. There, all the markup is perfectly executable by simple center alignment + a little margin . - Vadim Ovchinnikov

1 answer 1

I deleted the inappropriate position: absolute; and transform on this example.

Here is the solution to make the elements look like you have in the screenshot, based on your code.

 @import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); body { margin: 0; padding: 0; } .header { display: flex; justify-content: center; align-items: center; background: gray; padding: 5px; } .header a { cursor: pointer; text-align: center; white-space: pre-wrap; font-family: "Kaushan Script", cursive; line-height: 1; font-size: 30px; } .header .sketches { background-color: #fff; width: 110px; margin-right: 5%; } .header .smth { background-color: #fff; width: 140px; height: 60px; margin-right: 1%; } .header .gallery { width: 185px; height: 60px; padding: 15px 0; background: gold; font-size: 60px; margin-right: 1%; } .header .logo { width: 60px; height: 80px; background: hotpink; margin-right: 5%; } .header .blog { background-color: #fff; width: 60px; height: 38px; margin-right: 5%; } .header .about { background-color: #fff; width: 100px; } 
 <div class="header"> <a class="sketches">Sketches</a> <a class="smth">Something serious</a> <a class="gallery">Gallery</a> <a class="logo"></a> <a class="blog">Blog</a><a class="about">About it</a> </div>

In order for .gallery and .logo be clearly centered in the center of their separate div with the class .center . The remaining elements (left and right) wrap in a div with the class .half . Assign to .half flex: 1; so that the elements occupy the remaining width. Ready example:

 @import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); body { margin: 0; padding: 0; } .header { display: flex; background: gray; padding: 5px; } .half, .center { display: flex; justify-content: center; align-items: center; } .half { flex: 1; } .header a { cursor: pointer; text-align: center; white-space: pre-wrap; font-family: "Kaushan Script", cursive; line-height: 1; font-size: 30px; } .header .sketches { background-color: #fff; width: 110px; margin-right: 5%; } .header .smth { background-color: #fff; width: 140px; height: 60px; margin-right: 1%; } .header .gallery { width: 185px; height: 60px; padding: 15px 0; background: gold; font-size: 60px; margin-right: 1%; } .header .logo { width: 60px; height: 80px; background: hotpink; margin-right: 5%; } .header .blog { background-color: #fff; width: 60px; height: 38px; margin-right: 5%; } .header .about { background-color: #fff; width: 100px; } 
 <div class="header"> <div class="half"> <a class="sketches">Sketches</a> <a class="smth">Something serious</a> </div> <div class="center"> <a class="gallery">Gallery</a> <a class="logo"></a> </div> <div class="half"> <a class="blog">Blog</a> <a class="about">About it</a> </div> </div>

  • it's not quite that ... That's why. - VostokSisters
  • if everything was so simple)) - VostokSisters
  • Gallery and Logo should be right in the center, left and right - the same distance. This is a key point, so the question of using absolute positioning is still open. I know how to center the elements in the container, the question is different ... - VostokSisters
  • I would still not resort to absolute positioning, even here. Now I will update the answer. - Vadim Ovchinnikov
  • Added an elegant solution without hacks. - Vadim Ovchinnikov