CSS gap (in flex layout) is not supported in Safari.
2 Likes
Any remedial Fix?
1 Like
I didn’t say I didn’t like it I just preferred that with gap you don’t have to use it and don’t have to negate it for smaller screens when content wraps etc. Also a margin-right could cause a scrollbar on mobile or squash the content depending on set up. It’s not that I dislike margins but gap doesn’t suffer from those problems. Obviously in the real world we’d be adjusting with media queries anyway so its a minor point either way.
However for better support margins are the way to go for now until Safari completes their technical review of gap.
I was assuming some sort of page wrapper or centred layout would be required as I dislike left aligned sites as they look a bit awkward on large monitors.
Yes but only at very small sizes and then only because min-width needs to be set to zero (min-width is set to min-content by default in flex I believe). Otherwise the container doesn’t shrink to match the size that was set.
e.g.
This gap is consistent.
However I’m not saying that’s the way I would do it. It all depends on the task in hand so as we have both shown there are many ways to do the same thing but all with their own peculiarities.
It’s all good
3 Likes
CSS justify-content:space-between will push the right-hand box way over to the right on a large screen (unless e.g. max-width: 1100px is set on the body). Also the gap will go to zero for a range of screen widths.
@PaulOB Why don’t you like using margin-right?
2 Likes
Hmm I seem to have edited my last post instead of making a new one 
So my reply is on the post before your last one 
3 Likes
Not really.
We can’t use @supports because gap is supported in grid and would pass the test. It’s flexbox in Safari that doesn’t support gap. (I guess the browser makers didn’t expect a property to be supported for one layout system but not another.)
The only option for Safari is to use margins or one of the other methods mentioned instead. As I mentioned (before I edited my last post in error) it is under review in Safari so shouldn’t be long before its implemented.
Or alternatively use grid where gap is supported in Safari
1 Like
I don’t think that is the case. If break-word is not used, to avoid overflow you need to be careful that long words are less than 320px for small smartphones (also allowing for border widths, padding etc).
In the real world I don’t adjust with any media queries 
2 Likes
No its not actually set to the min-content value as I stated but it is set to auto by default which means that any long words or unbroken content will stop the element squashing (in flex items only) which is why the space between was getting smaller. With min-width:0 in place the element will keep on shrinking. Of course there will come a point when things overlap but its a different example to your fixed width column so comparisons are not equivalent.
Here’s an example of how min-width:0 makes a difference to flex items just to explain what I meant
Close the browser window smaller to see the behaviour changes.
Yes that’s good if you can manage that but its not always possible. It’s a good thing to attempt though so I’m not knocking it
1 Like
To always have 60px gap you need to delete the max-width: 350px (because 30% of 1280 is 384).
2 Likes
Yes true. I didn’t notice that
Too busy looking at other things. 
1 Like
There’s a fairly challenging demo of using flexbox with no media queries here: http://create.mywebcommunity.org/demo.html (on some free webspace).
Media queries would improve the aethetic appearance, especially at some browser widths, but with the software I use pages can be created and edited very quickly.
3 Likes
Good work :).
I generally say that the simpler you make something the easier it is to manage. Losing the media queries is one less headache to manage :;
3 Likes
I was willing to write the media query and I encountered the below problem. How can I get rid of pseudo element In media query it is not a class where we can put display: none
Yes you add display:none to the pseudo element with no problems.
.wrapper:before{display:none;}
or indeed:
.wrapper:before {content:none}
Both will remove the pseudo element completely.
1 Like
<div class="hamburger">
<div class="top clicked"></div>
<div class="middle clicked"></div>
<div class="bottom clicked"></div>
</div>
.hamburger {
display: flex;
gap: 10px;
flex-direction: column;
margin: auto;
}
.top, .middle, .bottom {
max-width: 60px;
max-height: 6px;
width: 60px;
height: 6px;
background-color: #212121;
}
.middle.clicked {
transition-duration: 0.5s;
background: transparent;
}
.top.clicked {
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.bottom.clicked {
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.hamburger:hover {
cursor: pointer;
}
margin: auto is not working on the hamburger.
It is working but the hamburger is 100% wide so there is nothing to centre:) (Just give a red background to .hamburger to see what I mean )
If you want to centre the content then there is a flex rule for that ( align-items:center when column axis in use)
.hamburger {
display: flex;
gap: 10px;
flex-direction: column;
margin: auto;
align-items:center;
}
Or give the hamburger a width to match its content.
.hamburger {
display:flex;
gap: 10px;
flex-direction: column;
margin: auto;
width:60px;
}
1 Like
Post Update:
.clicked .top {
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
transition-duration: 0.5s
}
.clicked .bottom {
transform: rotateZ(-45deg) scaleX(1.25) translate(8px, -8px);
transition-duration: 0.5s
}
Only through the hit and trial was I able to come closer. Still logic not clear how X and Y coordinates are accessed through CSS. I am trying to the browser as many resources as possible to get some clarity. Any help will be appreciated.
Sorry you lost me
If you mean translate then its translate(x,y).
1 Like
Note that if you put the transition on the normal state then the menu will animate back to closed rather than just clicking shut.
e.g.
.top,
.middle,
.bottom {
max-width: 60px;
max-height: 6px;
width: 60px;
height: 6px;
background-color: #212121;
transition: transform 0.5s ease;
}
.clicked .middle {
background: transparent;
}
.clicked .top {
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.clicked .bottom {
transform: rotateZ(-45deg) scaleX(1.25) translate(8px, -8px);
}
1 Like
How about this?
.top:active {
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.middle:active {
transition-duration: 0.5s;
background: transparent;
}
.bottom:active {
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
BTW there’s no need for .hamberger:hover selector. The cursor: pointer declaration can go in the .hamburger selector.
1 Like