Flexbox align-items and justify-content end not working in Safari MacOs
I have used this and it is working
-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;
Source: How is possible that "display: flex" and "align-items: center" do not work anymore on my iphone?
Flex align-items: center not centering items
In the code snippet below, align-self
property is used instead of align-items
. If you keep align-items
and apply a height
to the container
you can see it working. CODEPEN
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: #ff0;
}
<div class="container">
<p>Lorem ipsum</p>
</div>
Flex justify-content, align-items not working on Safari or mobile browsers
Safari has issues with flexbox on buttons. To work around this, wrap the contents of the
button
in adiv
and style thediv
instead.Setting both axes of an image can result in the aspect ratio being ignored. Use
object-fit: contain
to ensure this doesn't happen.
#container {
display: flex;
flex-direction: row;
}
.mainImageContainer {
width: 500px;
height: 375px;
margin: 1rem;
}
.mainImageBtn {
border: none;
padding: 0;
}
.mainImageWrapper {
background-color: rgb(231, 60, 60);
display: flex;
justify-content: center;
align-items: flex-start;
width: 500px;
height: 375px;
}
.mainImage {
cursor: zoom-in;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: top center;
}
<div id="container">
<div class="mainImageContainer">
<button class="mainImageBtn">
<div class="mainImageWrapper">
<img class="mainImage" src="https://eoja82.github.io/For-Sale/img/car_2.jpg" alt="car" />
</div>
</button>
</div>
<div class="mainImageContainer">
<button class="mainImageBtn">
<div class="mainImageWrapper">
<img class="mainImage" src="https://eoja82.github.io/For-Sale/img/tumbler%20-%202.jpeg" alt="instructions" />
</div>
</button>
</div>
</div>
Vertical centering flexbox overlay in iOS safari
After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).
So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.
.overlay-content-wrapper {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position:fixed;
height: 100%;
width: 100%;
top: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
padding: 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.overlay-content {
padding: 8px;
min-height: 10px;
min-width: 10px;
margin: auto;
background-color: #fff;
border-radius: 8px;
border: 1px solid #a5a5a5;
position: relative;
}
Why is flexbox code not working in Safari 5 and 6?
Safari versions prior to 6.1 support a previous version of the flexbox specification (source).
For Safari 5.0, 5.1 and 6.0, in addition to display: -webkit-box
(which is the display: flex
of that time), you need to use the -webkit-box-orient
property.
This tells the flex container how to align its children.
The initial value is inline-axis
. Try using vertical
or horizontal
.
This is the section in the spec with the details:
https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation
More details here: Flexbox code working on all browsers except Safari. Why?
Can't scroll to top of flex item that is overflowing container
The Problem
Flexbox makes centering very easy.
By simply applying align-items: center
and justify-content: center
to the flex container, your flex item(s) will be vertically and horizontally centered.
However, there is a problem with this method when the flex item is bigger than the flex container.
As noted in the question, when the flex item overflows the container the top becomes inaccessible.
For horizontal overflow, the left section becomes inaccessible (or right section, in RTL languages).
Here's an example with an LTR container having justify-content: center
and three flex items:
See the bottom of this answer for an explanation of this behavior.
Solution #1
To fix this problem use flexbox auto margins, instead of justify-content
.
With auto
margins, an overflowing flex item can be vertically and horizontally centered without losing access to any part of it.
So instead of this code on the flex container:
#flex-container {
align-items: center;
justify-content: center;
}
Use this code on the flex item:
.flex-item {
margin: auto;
}
Revised Demo
Solution #2 (not yet implemented in most browsers)
Add the safe
value to your keyword alignment rule, like this:
justify-content: safe center
or
align-self: safe center
From the CSS Box Alignment Module specification:
4.4. Overflow Alignment: the
safe
andunsafe
keywords and
scroll safety
limitsWhen the [flex item] is larger than the [flex container], it will
overflow. Some alignment modes, if honored in this situation, may
cause data loss: for example, if the contents of a sidebar are
centered, when they overflow they may send part of their boxes past
the viewport’s start edge, which can’t be scrolled to.To control this situation, an overflow alignment mode can be
explicitly specified.Unsafe
alignment honors the specified
alignment mode in overflow situations, even if it causes data loss,
whilesafe
alignment changes the alignment mode in overflow
situations in an attempt to avoid data loss.The default behavior is to contain the alignment subject within the
scrollable area, though at the time of writing this safety feature is
not yet implemented.
safe
If the size of the [flex item] overflows the [flex container], the
[flex item] is instead aligned as if the alignment mode were
[flex-start
].
unsafe
Regardless of the relative sizes of the [flex item] and [flex
container], the given alignment value is honored.
Note: The Box Alignment Module is for use across multiple box layout models, not just flex. So in the spec excerpt above, the terms in brackets actually say "alignment subject", "alignment container" and "start
". I used flex-specific terms to keep the focus on this particular problem.
Explanation for scroll limitation from MDN:
Flex item
considerationsFlexbox's alignment properties do "true" centering, unlike other
centering methods in CSS. This means that the flex items will stay
centered, even if they overflow the flex container.This can sometimes be problematic, however, if they overflow past the
top edge of the page, or the left edge [...], as
you can't scroll to that area, even if there is content there!In a future release, the alignment properties will be extended to have
a "safe" option as well.For now, if this is a concern, you can instead use margins to achieve
centering, as they'll respond in a "safe" way and stop centering if
they overflow.Instead of using the
align-
properties, just putauto
margins on
the flex items you wish to center.Instead of the
justify-
properties, put auto margins on the outside
edges of the first and last flex items in the flex container.The
auto
margins will "flex" and assume the leftover space,
centering the flex items when there is leftover space, and switching
to normal alignment when not.However, if you're trying to replace
justify-content
with
margin-based centering in a multi-line flexbox, you're probably out of
luck, as you need to put the margins on the first and last flex item
on each line. Unless you can predict ahead of time which items will
end up on which line, you can't reliably use margin-based centering in
the main axis to replace thejustify-content
property.
Why is my Flexbox layout not working properly in Safari 15 and in Chrome?
Couple of problems:
- if you want both columns to be 50% width on all screen sizes, you need to set
flex:1 1 50%
on both the p and the img tags. - if you want the img tag to scale up and down instead of always being it's full size, you need to set
width:100%;height:auto
on it. - if you want to center the two elements vertically all you need is
align-items:center
on their container (where display:flex is defined) and not use any vertical padding on them
As a matter of personal preference I would set display:block
on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.
Code:
<div class="container4">
<p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
<img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>
<style>
.container4 {
font-size: 40px;
display: flex;
align-items: center;
gap: 50px;
}
.element4 {
padding-left: 50px;
flex: 1 1 50%;
}
.element4-2 {
padding-right: 50px;
flex: 1 1 50%;
width:100%;height:auto;
}
</style>
Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)
Related Topics
Retain Cycle (Strong Reference) Fix for Custom Uitextfield
Input Field iOS Safari Bug - Can't Type in Any Text
Get Random Child from Firebase Database
iPhone Simulator Suddenly Started Running Very Slow
Uiscrollview with Centered Uiimageview, Like Photos App
Uploading Archive Error: "Missing iOS Distribution Signing Identity for ..."
Nsinteger and Nsuinteger in a Mixed 64Bit/32Bit Environment
How to Change the Default Text of Cancel Button Which Appears in the Uisearchbar +Iphone
Phonegap iOS 5.1 and Localstorage
How to Programmatically Find Swift's Version
Getter VS Computed Property. What Would Warrant Using One of These Approaches Over the Other
How Is Possible That "Display: Flex" and "Align-Items: Center" Do Not Work Anymore on My Iphone
Getting Back a Date from a String
Completion Handler for Uinavigationcontroller "Pushviewcontroller:Animated"
Linking Objective-C Categories in a Static Library
What Are the Benefits of Using Storyboards Instead of Xib Files in iOS Programming
How to Do Programmatically Gradient Border Color Uibutton with Swift