Right now I have this code:
display: flex;
justify-content: center;
align-items: center;
The element centers on Chrome and Firefox, but not on IE10. I didn't check it yet on Safari and others browsers, but I want it to support them too. What should I add to this code?
You will need relevant vendor prefixes for IE10, Safari 8 and below, example:
.my-class-name {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-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;
}
Flexbox support tables: caniuse.com/#feat=flexbox
Autoprefixer: autoprefixer.github.io
Prefixfree: leaverou.github.io/prefixfree
Related
I've got a ul, in Chrome it maintains its size relative to its container and scales, in IE it doesnt scale instead acting like theres no css.
The second photo is how it looks at full screen, the first photo is how it looks after scaling however when scaling in IE it continues to look like the second photo.
I thought this was because of Flexbox but as you can see every prefix I can think of has been applied.
I've can a number of compatibility checks and it looked like the issue was the use of rem but changing this to % or pixel doesn't change a thing.
Every other section of the sites is compatible across all browsers and scales fine even on mobile devices.
I haven't applied a style to this that isn't used in any of the other sections so this literally makes no sense to me.
Any help would be appreciated.
#skills {
height: 40rem;
padding-top: 2rem;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: #000;
background-color: rgba(27, 28, 28, 0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#lang {
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: 3%;
}
#bar {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-direction: column;
align-items: flex-start;
-webkit-box-align: flex-start;
-moz-box-align: flex-start;
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
margin-left: 30px;
}
<div id="lang">
<ul id="bar">
<li class="bars"><span class="bartxt">HTML 5</span></li>
<li class="bars"><span class="bartxt">CSS 3</span></li>
<li class="bars"><span class="bartxt">Git</span></li>
<li class="bars"><span class="bartxt">Responsive design</span></li>
<li class="bars"><span class="bartxt">Unicycling</span></li>
</ul>
</div>
I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
}
.bold {
font-weight: 600;
}
<div class = "align-right">
Purchase Date:
<span class = "bold"> 09/10/2018</span>
</div>
You need to add flex-direction: column; to the parent element in order to justify-content in IE11
.align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
text-align:right;
flex-direction: column; }
The following worked for me across different browsers.
.text-vcenter-right {
height: 200px;
width: 100%;
background-color: grey;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: right;
text-align:right;
}
<div class="text-vcenter-right">Text vertically centered and justified towards right</div>
So i have this demo :https://fiddle.jshell.net/ghyy6ntf/
Problem is that with flex i centered text and image but i cant put title and subtitle one bellow another. So i need to have image on left side and title and description verticaly centered in table td but one bellow another.
.product_box{
float: left;
width: 100%;
vertical-align: middle;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: flex-start;
-ms-flex-pack: center;
justify-content: flex-start;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
I'm having a problem with a site redesign on IE 11 - the portfolio section slowly shrinks, aligns left, and eventually disappears when the window is less than 768px wide, and when clicking on a portfolio item, the content enlarges way beyond the viewport. There is no such issue with Chrome or Firefox.
This is the first time I have used flexbox, so I'm guessing that is the problem.
The site:
test.nicklemmon.com
Thanks!
I was able to resolve the issue where the content disappears entirely - it had something to do with usingn max-width on a div (though this didn't effect the other browsers)
Isolating where I think the left-aligning problem lies...I'm using SASS + Bourbon:
.work-container .row {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
max-width: 100%;
margin: 0 auto;
}
#media (max-width: 768px) {
.work-container .row {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100% !important;
}
}
I'm also temporarly allowing overflow to see if anyone else can see where the issue lies. Looking at the code again, some of this is redundant.
OK, looking at it again I see where the problem lies, but I'm still not sure how to resolve it:
.work-belt {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 200%;
}
If I take out display: flex, then the shrinking/left-aligning behavior goes away, but then the layout breaks on Chrome and Firefox.
Anyone have any thoughts?
Alright, well nevermind then - I resolved the issue myself:
For some reason IE required the following properties on the container (.work-belt) whereas Chrome and Firefox didn't:
.work-belt {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 100%;
width: 200%;
}
I would be interested to hear why there is a discrepancy there, but at least it's resolved.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Why doesn't the following code work in IE10?
.foo {
display: -ms-flex;
-ms-justify-content: center;
}
What do I need to write in order for them to work?
IE10 implemented the Flexbox draft from March 2012. Those properties correspond to these:
.foo {
display: -ms-flexbox;
-ms-flex-pack: center;
}
A good place to start when trying to get the syntax right for all browsers is http://the-echoplex.net/flexyboxes/
For centering elements horizontally and vertically within a container you'll get code something like this: (working in Chrome,FF,Opera 12.1+ and IE 10+)
FIDDLE
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
CSS
.flex-container {
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-item
{
width: 100px;
height:100px;
background: brown;
margin: 0 10px;
}
/*
Legacy Firefox implementation treats all flex containers
as inline-block elements.
*/
#-moz-document url-prefix() {
.flex-container {
width: 100%;
-moz-box-sizing: border-box;
}
}