I would like get this behavior in Internet Explorer 11
In Chrome and Firefox the words wrap to left and right when has a flexbox center alignment. In IE11 the wrap text is only to the right. Check the pictures to see the diference in IE11.
¿ How can get the Chrome and Firefox behavior in IE11 ? Thanks !!
div {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
}
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
See IE11 Preview
See Chrome and Firefox preview
This is a common flexbug in IE.
You could see that flex is partially supported in IE from:https://caniuse.com/#feat=flexbox
You could also find common flexbugs and related workarounds from: https://github.com/philipwalton/flexbugs
I modified part of your code and maybe you could refer to:
CSS.
.outer {
width: 150px;
border: 1px solid #000000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner {
box-sizing: border-box;
max-width: 100%;
}
HTML.
<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="outer">
<div class="inner">
This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
</div>
</div>
To IE11 the solution is use flex-direction: column;
Code Sample
Related
I've been reading about inconsistency of flexbox across browsers lately and I ended focusing on this particular example: making buttons flex containers.
It is a long known bug and there are some workarounds:
https://github.com/philipwalton/flexbugs#flexbug-9
Flexbox not working on button or fieldset elements
So, based on those links ^^ I expected to find some weird behaviours.
Example 1:
.one {
height: 100px;
width: 200px;
border: 1px solid black;
}
.two {
height: 100%;
width: 100%;
background: red;
display: flex;
flex-direction: column;
align-items: stretch;
}
.three {
flex-grow: 1;
background: yellow;
}
<div class="one">
<button class="two">
<span class="three">
Hello
</span>
</button>
</div>
What I don't understand about example 1 is that if you remove align-items: stretch; the yellow span doesn't stretch by default across the cross axis (here horizontal axis) on Chrome and Safari
but does on Firefox.
Example 2:
.one {
height: 100px;
width: 200px;
border: 1px solid black;
}
.two {
height: 100%;
width: 100%;
background: red;
display: flex;
flex-direction: column;
}
.three {
flex-grow: 1;
background: yellow;
}
<div class="one">
<button class="two">
<span class="three">
Hello
</span>
</button>
</div>
As expected, example 2 doesn't stretch the yellow button horizontally on Chrome and Safari but does on Firefox.
According to the W3C standards https://www.w3.org/TR/css-align-3/#align-items-property
the default value for align-items is stretch (or normal which, I think, does more of less the same thing in this context) for all elements.
What I found is that the default value of align-items for buttons in Safari and Chrome is flex-start. For Firefox, it is normal.
My question is: why don't Safari and Chrome respect the standard for the default value of align-items ?
Since they both share the value flex-start it might be a webkit thing but still doesn't explain why.
User agent style for buttons in Chrome
PS1: I am using
Chrome 79.0.3945.79
Safari 12.1.1
Firefox 70.0.1
PS2: FYI if I make it a flex container row even applying align-items: stretch; won't make a difference, still doesn't stretch across the cross axis but I would think that's because buttons are bad flex-containers: https://jsfiddle.net/jimousse/9by4zg32/1/
This question already has answers here:
flex container min-height ignored in IE
(3 answers)
Closed 5 years ago.
I am trying to vertical align some text inside a flexbox container that has a min height and it works well except for in ie11, where the content is not centred.
.banner {
background:#ccc;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
flex-direction:column;
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
<span>IE is bobbins</span>
</div>
I have had a look around and people who have had similar problems are suggesting that adding a height will fix the issue but obviously this negates the min-height so it's not very useful.
Does anyone know a way to get the vertical centring to work in ie with a min-height?
If you are open to detecting and applying different CSS to ie11, you could do something like the following:
fiddle
.banner {
background: #ccc;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
flex-direction: column;
}
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.banner span {
display: table-cell;
min-height: 60px;
vertical-align: middle;
}
}
<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
<span>IE is bobbins</span>
</div>
This fix by Chris Wright might be usefull:
https://codepen.io/chriswrightdesign/pen/emQNGZ/
It's based on the idea to wrap flex-direction:column inside a flex-direction:row parent:
.l-flex-parent {
display:flex;
flex-direction:row;
}
I have a complex layout where I center various elements vertically and horizontally with flexbox.
The last element then has margin-right:auto; applied to push the elements left (and negate centering them).
This works correctly everywhere except on IE10/11 and has been driving me crazy.
HTML/CSS sample:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
</div>
http://codepen.io/anon/pen/NrWVbR
You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.
Any IE/flexbox experts out there that have encountered something like this before?
This appears to be an IE bug.
According to the flexbox specification:
8.1. Aligning with auto margins
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
In other words, auto margins take precedence over justify-content.
In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).
Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.
IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.
(Note that IE10 is built on a previous version of the spec.)
Solutions
Method #1: Use auto margins only
If justify-content is removed, auto margins work fine in IE10/11.
So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).
Method #2: Use an invisible spacer div
Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.
#container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
#third-item {
flex-grow: 1;
visibility: hidden;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: pink;
}
#container > div {
background: cornflowerblue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
<div id='third-item'>third item</div>
</div>
I have a complex layout where I center various elements vertically and horizontally with flexbox.
The last element then has margin-right:auto; applied to push the elements left (and negate centering them).
This works correctly everywhere except on IE10/11 and has been driving me crazy.
HTML/CSS sample:
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
#second-item {
margin-right: auto;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: red;
}
#container > div {
background: blue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
</div>
http://codepen.io/anon/pen/NrWVbR
You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.
Any IE/flexbox experts out there that have encountered something like this before?
This appears to be an IE bug.
According to the flexbox specification:
8.1. Aligning with auto margins
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
In other words, auto margins take precedence over justify-content.
In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).
Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.
IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.
(Note that IE10 is built on a previous version of the spec.)
Solutions
Method #1: Use auto margins only
If justify-content is removed, auto margins work fine in IE10/11.
So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).
Method #2: Use an invisible spacer div
Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.
#container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
#third-item {
flex-grow: 1;
visibility: hidden;
}
/* just some colors - not important */
#container {
height: 200px;
width: 100%;
background: pink;
}
#container > div {
background: cornflowerblue;
padding: 10px;
outline: 1px solid yellow;
}
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
<div id='third-item'>third item</div>
</div>
I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?
Flex Solution
It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.
.wrap {
height: 200px;
width: 200px;
border: 1px solid #aaa;
margin: 10px;
display: flex;
}
.wrap span {
align-self: flex-end;
}
<div class="wrap">
<span>Align me to the bottom</span>
</div>
In the above example, we first set the parent element to display: flex; and later, we use align-self to flex-end. This helps you push the item to the end of the flex parent.
Old Solution (Valid if you are not willing to use flex)
If you want to align the text to the bottom, you don't have to write so many properties for that, using display: table-cell; with vertical-align: bottom; is enough
div {
display: table-cell;
vertical-align: bottom;
border: 1px solid #f00;
height: 100px;
width: 100px;
}
<div>Hello</div>
(Or JSFiddle)
You now can do this with Flexbox justify-content: flex-end now:
div {
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 150px;
height: 150px;
border: solid 1px red;
}
<div>
Something to align
</div>
Consult your Caniuse to see if Flexbox is right for you.